CSS Animation Generator

CSS @keyframesアニメーションを視覚的に作成します。キーフレーム、タイミング、イージングを定義してライブプレビューで確認できます。

動作方法: トランスフォームと不透明度でキーフレームを定義します。タイミング、イージング、継続時間を調整します。アニメーションをリアルタイムでプレビューしてCSS をコピーします。

0%25%50%75%100%

@keyframes fadeIn {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: fadeIn 0.8s ease 0s 1 normal forwards;
}

CSS アニメーションとは？

CSS アニメーションにより、JavaScriptなしでHTML要素をアニメーション化できます。@keyframesルールを使用して、アニメーションシーケンス中のさまざまなポイントでスタイルを定義します。ブラウザはキーフレーム間をスムーズに補間し、トランスフォーム、不透明度、色などの滑らかなトランジションを作成します。

Animation Generator の使い方

プリセットを選択するか、ゼロから始めます。特定のパーセンテージ（0〜100%）でキーフレームを追加し、各キーフレームでトランスフォームと不透明度の値を設定します。アニメーションの継続時間、タイミング関数、遅延、反復回数を調整します。リアルタイムでアニメーションをプレビューし、満足したら生成されたCSS をコピーします。

Animation Timing Functions

タイミング関数はアニメーションの速度曲線を制御します。'ease'は遅く始まり、加速し、その後減速します。'linear'は一定の速度を保ちます。'ease-in'は遅く始まり加速します。'ease-out'は速く始まり減速します。カスタム曲線の場合、4つの制御点を持つcubic-bezier()を使用します。

CSS アニメーションのベストプラクティス

  • アニメーションにはtransformとopacityを優先する — GPU加速され、レイアウト再計算をトリガーしない
  • will-changeは控えめに使用しブラウザに今後のアニメーションをヒントとして与える
  • UI フィードバックは300ms未満、トランジションは500ms〜1sに保つ
  • prefers-reduced-motionメディアクエリを使用してアクセシビリティ設定を尊重する
  • width、height、top、leftのアニメーションを避ける — 代わりにtransform: translate()を使用する
  • animation-fill-mode: forwardsを使用してアニメーション終了後の最終状態を保持する