LIVE PREVIEW
アニメーションを確認
Aa
基本設定
キーフレーム
GENERATED CSS
コピーして使う
要素へ指定
@keyframes
このツールの使い方・詳細
🛠 使い方
キーフレーム名と再生時間を入力し、回数、方向、終了時の状態を選びます。イージングはプリセットまたはcubic-bezier・stepsを直接指定できます。開始・中間・終了のtransformとopacityを調整し、プレビューで確認してからanimation指定または@keyframesをコピーしてください。
💡 活用シーン・ユースケース
- Webサイトの登場・移動・回転アニメーションのCSS雛形を作る
- animation-fill-modeやanimation-directionの挙動をプレビューで比較する
- デザイナーと開発者の間で再生時間やイージングの設定を共有する
CSS animationの主な設定
animation-durationは1回分の時間、animation-iteration-countは再生回数、animation-timing-functionは速度変化を指定します。終了時の見た目を残す場合はanimation-fill-mode: forwards、元へ戻す場合はnoneを選びます。
生成後に確認すること
実際の画面では要素の大きさや周囲のレイアウトによって見え方が変わります。動きを多用せず、必要に応じてprefers-reduced-motionへの対応も追加してください。