こんな方におすすめ
- 短い演出を実装する開発者
- 動きのタイミングを調整するデザイナー
Developer Design Utility
CSSアニメーション生成ツール
Fade、Slide、Scale、Bounce、Pulse などの CSS アニメーションをライブプレビューで調整し、@keyframes と animation コードをすぐに生成できます。
Animation コード生成
duration、delay、easing、繰り返し回数、方向を組み合わせて CSS animation コードを作成します。
ライブプレビュー
選択したアニメーション効果を Preview Card でその場で確認できます。
@keyframes 出力
クラスコード、keyframes、prefers-reduced-motion 対応コードをまとめて生成します。
Animation Type
Fade In
Duration
1s
Easing
ease
Iteration
1
Animation 設定
アニメーションの種類、速度、繰り返し方法、動きの強さを調整して、目的に合う UI モーションを作成できます。
基本として生成する @keyframes の種類を選択します。
CSS の @keyframes 名とクラスの animation 値に使用されます。
0.2s
1s
5s
0s
0s
3s
動きの加速・減速カーブを選択します。
無限ループは、ローディング、強調バッジ、装飾要素など目的が明確な場合に限定して使うことをおすすめします。
通常、逆再生、交互再生、交互逆再生の方式を選択します。
10
40
120
Live Preview
CSS Animation
Preview Card
設定したアニメーションがここにリアルタイムで適用されます。
Type
Fade In
Duration
1s
Iteration
1
おすすめプリセット
カード表示、ボタン強調、ローディング装飾、通知効果でよく使うアニメーションの組み合わせです。
基本の表示効果
強調 / インタラクション
装飾 / ループアニメーション
生成結果
下のコードを CSS ファイルに貼り付け、目的の要素にクラスを適用してください。
設定を選択してから CSS コード生成ボタンを押してください。
動きを減らす設定に対応したCSSアニメーションを作る
8種類の動きを比較し、キーフレームとanimation宣言を生成します。時間、繰り返し、方向、移動量を調整し、動きを減らす代替ルールも確認できます。
活用場面
- 要素を一度だけフェード表示する。
- 控えめな浮遊表示を試す。
入力から結果の確認まで
- 1
fade・slide・scale・rotate・bounce・shake・float・pulseから選びます。
- 2
用途が分かる名前を入力します。
- 3
時間、遅延、イージング、繰り返し、方向を設定します。
- 4
再生して開始と終了の状態を確認します。
- 5
CSSを生成し、実際の画面と動きを減らす設定で確認します。
短い表示効果
- 入力
- fade、0.4秒、ease-out、1回
- 結果
- 不透明度が0から1に変わります。
fill-modeはboth固定で、専用の選択欄はありません。
緩やかな浮遊
- 入力
- float、移動量20px、alternate、infinite
- 結果
- translateY(0)とtranslateY(-20px)の間を移動します。
浮遊用のプリセットで、連続回転ではありません。
計算・処理の仕組み
プリセットのtransform・opacityキーフレームを使い、名前、時間、イージング、遅延、反復、方向、bothを短縮記法にまとめます。短縮記法の予約語と重なる名前には接頭辞を付けます。reduced-motionでは動きを止めて表示状態を戻します。
注意点と制限
- 任意のキーフレーム編集には対応しません。
- rotateは登場時の回転で、360度回り続けるスピナーではありません。
- 既存のtransformと競合する場合があります。
- 動きを止めても状態変化が伝わるかは別途確認が必要です。
データの取り扱い
名前と設定、プレビューはブラウザー内で処理します。
参考資料
あわせて使えるツール
- ガラス風CSS生成ツール
模様のある背景にカードを重ねる。
- Flexboxレイアウト練習
空の状態の案内を中央に配置する。
よくある質問
linearを名前にできますか？
イージングとの混同を避け、animation-linearに正規化します。
fill-modeを変更できますか？
生成値はbothです。別の値が必要なら出力後に編集します。
reduced-motionのルールは必要ですか？
動きの軽減を希望するユーザー向けの代替表示です。実際の構成でも動作を確認してください。