CSSアニメーション ジェネレーター
フェード・スライド・ズーム・回転・バウンス・パルス・シェイクの7種から選び、長さと速度変化を調整。@keyframes と animation 指定の両方を出力します。再生ボタンで動作確認可能。
設定
種類
速度変化
繰り返し
プレビュー
—
使い方・しくみ
動きの種類・長さ・繰り返しを選び「再生」で確認。keyframes と animation のCSSが出ます。
@keyframes で「開始→終了」の状態を定義し、animation で要素に適用します。出力の2つ（keyframes と animation 指定）をCSSに貼れば同じ動きになります。infinite で無限ループ。
計算はこのブラウザの中だけで、入れた内容はどこにも送りません。