SUPER EASY UTILS

CSSアニメーションジェネレーター

CSSキーフレームアニメーションをビジュアルで作成します。

プレビュー

Start
Animate

生成されたCSS

@keyframes my-animation {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    opacity: 1;
    background-color: #3b82f6;
  }
  100% {
    transform: translate(100px, 0px) scale(1.2) rotate(45deg);
    opacity: 1;
    background-color: #ec4899;
  }
}

.animated-element {
  animation: my-animation 2s ease-in-out 0s infinite normal forwards;
}

アニメーション設定

2s

開始状態0%

0, 0
1
0°
1
#3b82f6

終了状態100%

100, 0
1.2
45°
1
#ec4899
次に
完全ガイドを読む
または他のツールを試す
CSSパターン生成器CSSグラデーション生成器ASCIIアートジェネレーター

おすすめのツール

役に立つかもしれない厳選されたツール

Creating CSS Animations Without Hand-Coding

概要

CSS animations bring interfaces to life — fades, slides, bounces, and spins — but writing keyframes by hand is fiddly. This generator lets you configure an animation visually and outputs ready-to-paste CSS, all previewed live in your browser.

使い方（ステップ）

  1. 1

    Pick an animation type

    Choose fade, slide, bounce, spin, or another preset.

  2. 2

    Adjust timing

    Set duration, easing, delay, and how many times it repeats.

  3. 3

    Copy the CSS

    Paste the generated keyframes and animation rule into your stylesheet.

仕組み

You choose properties like type, duration, timing function, delay, and iteration, and the tool builds the corresponding @keyframes rule and animation shorthand. The timing function (ease, linear, cubic-bezier) shapes how the motion accelerates, while duration and iteration control speed and repetition. You see the effect live and copy the generated CSS into your stylesheet.

こんなときに使う

Adding a subtle entrance animation to a hero section or card. Creating a loading spinner or pulse effect. Prototyping motion before committing it to code.

よくある質問

It controls the acceleration curve of the motion — ease starts and ends slowly, linear is constant, and cubic-bezier lets you define a custom curve.

CSSアニメーションジェネレーター | Super Easy Utils