CSSアニメーション生成ツール

アニメーションの構造

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

省略記法には8つのプロパティがあります：animation-name duration timing-function delay iteration-count direction fill-mode play-state。

イージングの選択

このジェネレーターが提供するイージング関数は6つです：

正しいプロパティをアニメーションさせる

ブラウザーはどんなプロパティでもアニメーションできますが、レイアウトやペイントを発生させずにGPU上で滑らかに動くのはわずかです：

軽い（コンポジットのみ）：transform、opacity、filter。

重い（レイアウト／ペイント）：width、height、top、left、margin、padding、background-color。

widthやtopを毎秒60フレームで動かすのは小さな要素なら可能ですが、多数を同時に動かすとモバイルでカクつきます。複雑な動きには、top／leftより常にtransform: translate(...)を、アニメーションする幅・高さよりtransform: scale(...)を優先してください。

will-change：控えめに使う

コンポジットレイヤーを事前に確保するようブラウザーに伝えると、滑らかさが向上することがあります：

.card { will-change: transform; }

ただしメモリーを消費します。アニメーションが始まる直前に設定し、終わったら解除してください。多くの要素にwill-change: transformを常時設定するのは、役立つ以上に害になることがあります。

動作を減らす設定

中には動きに敏感で、OSの設定を変更するユーザーもいます：

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

この設定を尊重してください。フォールバックとして、即時の状態変化かごく控えめなフェードを用意しましょう。