CSS Keyframesビルダー — @keyframes・イージングカーブ生成ツール
移動・回転・スケールの@keyframesアニメーションを作成し、cubic-bezierのタイムラインでイージングを視覚的に調整
バウンス、フェード、振動といったCSSの`@keyframes`モーションアニメーションをスライダー操作だけで作り、そのままコードとして出力します。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- アニメーション名、時間、Y軸移動量、スケール値を調整します。
- リアルタイムでボックスの動きを確認し、CSSコードをコピーします。
よくある質問
- HTMLへの適用方法は?
- コピーした`@keyframes`とクラスのCSS構文を、サイトのスタイルシートに貼り付けるだけです。
- cubic-bezierのイージングカーブを自分で調整できますか?
- はい。タイムライングラフの制御点をドラッグすることで加速・減速のカーブを自由に調整でき、その値がそのままCSSコードに反映されます。
- 無限ループや逆再生も設定できますか?
- はい。繰り返し回数(無限を含む)とalternate(逆方向)再生オプションを指定すると、animation-iteration-countとanimation-directionの値が合わせて生成されます。