CSSのKeyframeを画面上で作成できるWebエディター 『Keyframes.app』

CSSのKeyframeをWeb上で

作成できる便利なWebエディター。

動きを付けるときに便利なKeyframeですが

動画エディタみたいに簡単に作成、コード取得できます。

keyframes2

Keyframes.app リンク先はこちらから

keyframes4

まずはAdd Stepをクリックして変更する場所を

挿入します。

0~100%までの間で自由にポイントを設定が可能です。

keyframes5

11%の所に挿入してみます。

たくさん挿入するとより細かなアクションを付けることが

できます。

keyframes6

11%はRotateを45degに設定しました。

0~11で45度傾くようになりました。

keyframes3

出来上がったアクションはCSSで簡単にコピペできます。

CSSで画像などにアニメーションを付けたいときに

簡単に使える便利なWebアプリです。

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次