animation

CSS アニメーション ジェネレーター

フェード・スライド・ズーム・回転・バウンス・パルス・シェイクの7種から選び、長さと速度変化を調整。@keyframes と animation 指定の両方を出力します。再生ボタンで動作確認可能。

使い方:動きの種類・長さ・繰り返しを選び「再生」で確認。keyframes と animation のCSSが出ます。

仕組み・詳しく
@keyframes で「開始→終了」の状態を定義し、animation で要素に適用します。出力の2つ(keyframes と animation 指定)をCSSに貼れば同じ動きになります。infinite で無限ループ。

設定

種類
速度変化
繰り返し

プレビュー

Box
—
広告