強火で進め

このブログではプログラム関連の記事を中心に書いてます。

CSSアニメーション時の緩急をGUIで自作出来るツール「Ceaser」


CSSアニメーションではアニメーションに緩急を付ける事が出来ます。

例えば右から左に移動をさせるアニメーションを作った場合、同じ速度で移動する事も可能ですが「最初はゆっくり加速して終わり近くになったらゆっくり減速させる」「最初に急加速して終わり近くになったら急減速する」など色々な緩急のつけ方が可能です。

デフォルトで使えるものを使用場合は簡単ですが自作する場合は「数値を手入力→ブラウザで確認」を繰り返す必要が有り、とても効率が悪いです。

その部分をGUIで作成出来る様にして有るのがこちらのツールです。これは良いツール!!

Ceaser - CSS Easing Animation Tool - Matthew Lein
http://matthewlein.com/ceaser/

関連情報

Transition Timing Functions < CSS | The Art of Web
http://www.the-art-of-web.com/css/timing-function/

CSS Animations Module Level 3
http://www.w3.org/TR/css3-animations/