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アプリです。

  • コメント: 0

10秒を切れるか?! AからZまでタイピングしてタイムを競うWebゲーム 『Type The Alphabet Game』前のページ

3DCGのヒントから映画を当てる、クイズで遊べるWebサービス 『3D Movie Quiz』次のページ

関連記事

  1. Web制作ツール

    こりゃ便利!! Webページのサムネイル生成やページ丸ごとPDFに出来る「HeartRails Ca…

    Webページのサムネイルの生成や、ページ丸ごとPDFに出来るWebサー…

  2. Web制作ツール

    Webページのフォントを自由に変更してプレビューできるWebサービス 『Font Fit』

    Webページの好きな場所のフォントを変更してプレビューする事が…

  3. Web制作ツール

    デザインの参考に!! Webなど様々なシーンのデザインの参考になるWebサービス 『UpLabs』

    なかなか考えても難しいデザインそんなデザインの参考になるWeb…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

PAGE TOP