CSS3 transition を生成するツール「Ceaser」

CSS3のtransitionはアニメーションを設定できるプロパティだが。いざ「transition」を利用してウェブデザインのパーツにアニメーションの動きを付けるとき、実際のパーツを何度も動かしてアニメーションのスピードを調整するのは非常に面倒だ。そんな時に非常に便利なのが「Ceaser」（シーサー）だ。このツールは、サンプルパーツを自由に調整してオンライン上でコードを自動生成してくれる。

機能

アニメーションのスピードをデフォルトの「linear」「ease」「ease-in」「ease-out」「ease-in-out」から選択することができる。ほかにも、独自のキーワードが用意された21種類のアニメーションが用意されている。もちろん「custom」を選択すると独自のアニメーションを作成することができる。

また、「left」「width」「height」「opacity」とアニメーションにともなう動作も用意してあります。

• 「left」→左から右
• 「width」→幅が広くなる
• 「height」→高さが高くなる
• 「opacity」→だんだん透明になる。

「duration」はアニメーションが開始から終了までにかかる時間です。ミリセカンドで記述されていますので、1000＝1秒になります。1,800だと1.8秒となります。

「Ceaser」を利用すれば簡単にtransitionをテストしてパーツに最適なアニメーションを適用することができます。