LocalToolsオフラインブラウザツール集

カテゴリー: 開発ツール

CSS keyframes ジェネレーター

サイト側で企画したツールツールが見つからない？

アニメーションプリセットを選んで @keyframes ブロックをコピー

フェード、スライド、バウンス、パルス、スピンのプリセットを選び、長さ、タイミング関数、繰り返し回数、方向を設定すると、完全な @keyframes ブロックと、それを使う animation の短縮記法がライブプレビューとともに得られます。

出力
@keyframes localtools-preview {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-24px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

.element {
  animation: localtools-preview 1.2s ease-in-out infinite normal;
}

プリセットを変更するたびに、下に表示されている CSS のとおりにプレビューが最初から再生されます。

このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。

このツールでできること

@keyframes ブロックを手で書くには、パーセンテージのステップに名前を付け、各ステップでのプロパティの値が期待どおりに補間されるようにする必要があり、複数ステップのあるバウンスのようなものでは微妙な間違いが起きやすいものです。このツールはよくあるアニメーションの形をあらかじめ用意されたステップのリストとして提供し、キーフレーム自体は変えないタイミングの調整項目だけを操作できるようにしているため、プレビューは常にその下に表示される CSS ブロックと完全に一致します。

使い方

  1. アニメーションプリセットを選びます。
  2. 長さ、タイミング関数、繰り返し回数、方向を設定します。
  3. @keyframes ブロックと、その下にある animation の短縮記法をコピーします。

プライバシー

このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。

よくある質問

プリセットを変更するとなぜプレビューが最初からやり直しになるのですか?
プリセットを切り替えると背後にある @keyframes のステップが入れ替わるため、実行中のアニメーションが古いものを最後まで再生してしまうことのないよう、プレビュー要素自体を作り直して、生成されたばかりのものと確実に一致させています。
繰り返し回数の「infinite」は何をしますか?
アニメーションを永遠に繰り返します。これがプレビューの既定の動作です。決まった回数だけ再生して止めたい場合は、代わりに数値を設定してください。
サーバーに何か送信されますか?
いいえ。@keyframes ブロックと animation の短縮記法は、選んだプリセットとタイミングの設定からページ内で組み立てられるため、プレビューが即座に更新されます。

すべてのツールに戻る