プリセット

アニメーションプロパティ

1s

0s

ライブプレビュー

CSS
<div class="speed-row">
  <span>速度</span>
  <input type="range" id="speed-ctrl" min="0.25" max="4" step="0.25" value="1">
  <span id="lbl-speed">1×</span>
</div>

<div class="preview-controls">
  <button class="ctrl-btn btn-play"  id="btn-play">&#9654; 再生</button>
  <button class="ctrl-btn btn-pause" id="btn-pause">&#10074;&#10074; 一時停止</button>
  <button class="ctrl-btn btn-reset" id="btn-reset">&#8635; リセット</button>
</div>

キーフレームエディター

生成されたCSS

freee で会計・給与計算をもっとスマートに

CSSアニメーションでWebサイトをリッチにしたら、バックオフィスも効率化しませんか？
freee 会計・freee 人事労務は、スモールビジネスの経理・給与計算を自動化します。
まずは30日間の無料トライアルでお試しください。

freee を無料で試す →

関連ツール

Flexboxレイアウトを作成 → CSSフレックスボックスジェネレーター グラデーションを生成 → CSSグラデーションジェネレーター ボックスシャドウを作成 → CSSボックスシャドウジェネレーター