アニメーションの仕方を視覚的に操作出来るCSS3ジェネレーター

技術的なエントリなので、興味ない人はスルーしてください。メモ的エントリです。

CSSのアニメーションにはイージング（アニメーションの変化の仕方）が設定できます。

プリセットされている中から具体例をあげますと、

• ease
  はじめゆっくりで、だんだん速くなって、最後にまたゆっくり
• linear
  ずっと同じ調子で変化

プリセットされている物では不服だ！という人のために、cubic-bezierという３次ベジェ曲線を引数にする物があるのですが…、わかんねぇよ。 ということで、コレを視覚的に設定できるCSSジェネレータの紹介です。

＞＞cubic-bezier

グラフは、黒いポチをドラッグして操作死ます。すぐ下にCSSのコードがあるのでそれを貼りつければOKです。

試しに極端なものをつくってみた

・瞬間移動的なやつ

・力を貯めて一気にいくやつ

…ココまで拘る人はCSS職人さんくらいでしょうかね。普通はプリセットされているものでいいですよね。

＞＞Ceaser - CSS Easing Animation Tool - Matthew Lein