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

技術的なエントリなので、興味ない人はスルーしてください。メモ的エントリです。
CSSのアニメーションにはイージング(アニメーションの変化の仕方)が設定できます。
プリセットされている中から具体例をあげますと、
  • ease
    はじめゆっくりで、だんだん速くなって、最後にまたゆっくり
  • linear
    ずっと同じ調子で変化
プリセットされている物では不服だ!という人のために、cubic-bezierという3次ベジェ曲線を引数にする物があるのですが…、わかんねぇよ。 ということで、コレを視覚的に設定できるCSSジェネレータの紹介です。

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

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

・瞬間移動的なやつ
・力を貯めて一気にいくやつ
…ココまで拘る人はCSS職人さんくらいでしょうかね。普通はプリセットされているものでいいですよね。

0 件のコメント:

コメントを投稿