CSS animationの前にCSS transition

/

まえがき

CSSでWEBページに動的な要素を加えたいと思ったのですが、CSSのanimationプロパティはkeyframeなど覚えることが多かったのでまずはtransitionを使ってみました。

transitionはanimationに比べて簡単に使えますし、既存サイトのナビゲーションを滑らかに動かすなどやりたかった事がtransitionでも十分に実現出来るので一度覚えたら重宝しています。

transition

transitinonはCSSのプロパティが変化する際の動作のアニメーション制御をしてくれます。
どういった効果なのかは実際の動作を見ると解りやすいです。

See the Pen CSS transition by koltatt (@koltatt) on CodePen.

それぞれの正方形に:hoverで値を指定しているのでマウスカーソルを合わせるとwidthが 40px -> 200pxに変更されますが、Box1の方は単にhoverの設定をしただけなので一瞬で長方形に変わるのに対して、Box2にはtransitionの設定をしてあるので伸びるような動作で変形をします。

このようにtransitionを利用するとCSSのプロパティが変化する際の単純な動作にアニメーションを設定してくれます。

サブプロパティ

transitionは各サブプロパティに値を設定してアニメーションを制御します。

transition-property

transition-propertyではtransitionを適用するプロパティを設定します。
デフォルトではallが設定されているので全てのプロパティにtransitionが適用されますが、widthやbackgroundなど特定のプロパティを指定した場合には指定したプロパティにだけアニメーションが適用され、その他の要素は即時にプロパティの変更が適用されます。
またnoneを指定し場合には全てのプロパティにtransitionが影響しなくなります。

transition-property: all;

transition-duration

transition-durationではtransitionによるアニメーション完了するまでの時間を設定出来ます。
利用できる単位はs(秒)かms(ミリ秒)になりますが、小数点を使って0.5sという形で指定する事も出来ます。

transition-duration: 0.8s;

transition-timing-function

transitinoによるアニメーションの変化の中間状態の値を設定出来ます。
指定出来る値にはease、linear、ease-in、ease-out、ease-in-out などのキーワードが用意されているほか、cubic-bezier関数によって3次ベジェ曲線の値を指定する事も出来ます。

transition-timing-function: ease-in-out;

transition-delay

transitionが実行されまでの待ち時間を設定できます。
例えばtransition-delay: 3s;とした要素に:hoverによってプロパティの変化をした場合には、対象の要素にマウスカーソルを合わせて3秒後にプロパティの変化が実行されます。

transition-delay: 3s;

transition

各サブプロパティはtransition{}によってまとめて指定する事も出来ます。

transition { all 0.5s ease-in-out 1s }

Sample

比較

それぞれのtransitionのプロパティが比較出来るサンプルを用意してみました。

See the Pen CSS transition2 by koltatt (@koltatt) on CodePen.

ドロップダウン

実際のドロップメニューに近いサンプルも作ってみました。左右で比べると見た目の違いが解りやすいと思います。

See the Pen transition navigation by koltatt (@koltatt) on CodePen.

プロパティのより詳しい解説は以下のサイトなどで確認出来ます。
CSS transition の使用/MDN

ベンダープレフィックス

transitionはCSS3で新しく追加された要素です。そのため気になるのが各ブラウザの対応状況ですがcaniuseによれば現在(2016/09)ではほぼ全ての主要ブラウザで対応しているようです。
ただし、今のところWorking Draft(草案段階)となっているのでtransitionのプロパティにはベンダープレフィックスをつけておくのが無難だと思います。

//ベンダープレフィックスの例
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition:  all 1s ease-in;
-ms-transition:  all 1s ease-in;
transition:  all 1s ease-in;;

個々の要素に一つ一つベンダープレフィクスを付けるのは手間なのでgulpなどでautoprefixerpleeeaseなどを使うと楽だと思います。

gulp-pleeeaseでCSSにautoprefixerとMinifyを実行する

感想

やはりtransitionはanimationに比べて簡単です。
場合によっては:hoverを使った既存のナビゲーションに2、3行付け足すだけで、ナビゲーションが滑らかに動いてくれて見た目がよくなります。またdurationなどanimationとの共通の要素もあるのでtransitionに慣れておけばCSS3のanimaitonを学ぶ際にも役立つと思います。

参照

CSS transition の使用/MDN
caniuse
Webpark