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制作ツール

    高機能なCSSでグラデーションが作れるWebサービス 『Grad3』

    CSSでグラデーションが作成できるWebサービス細かく設定が可…

  2. Web制作ツール

    WordPressプラグインをオシャレに紹介しているWebサービス 『WPぷらコレ!』

    Wordpressのプラグインを分かりやすく紹介しているWebサービス…

コメント

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

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

こんな人が書いてます

子供のころからパソコンや電子機械が好きでコンピュータ専門学校を卒業後にIT関連企業に勤めております。

企業や個人のネットワーク構築やパソコントラブル対応、ホームページ制作、システム開発などITに関する仕事を数多く対応しています。

Twitterでこのブログの投稿や日々の出来事などをつぶやいています。Twitter:@mogeringo

最近の記事

PAGE TOP