CSSアニメーションについて(その2)

CSSアニメーションについて(その2)

スポンサードリンク

こんばんは、
富田です。

前回のエントリーに引き続き、CSSアニメーションについて研究を進めて参りたいと思います。

前回、CSSアニメーションはtransitionとanimationの2種類のプロパティのうち、animationのみの解説をしていたと思うので、今回は残るtransitionについて記事を書いてみたいと思います。

※今回のサンプルデータは下記URLから確認できます。
https://k-103i.com/anime/button-transition/index.html

this

transformプロパティの4つの値(transrate、scale,rotate,skew)と、box-shadowを使ってそれぞれtransitionを有効にした場合のサンプルを用意致しました。

以下にサンプルで使用したコードを書き出しております。

HTML

 

スタイルシート

transitionについて

transitionには(transition-property、transition-duration、transition-timing-function、transiton-delay)の全部で4つのプロパティをショートハンドで記述することが出来ます。

例えば、下記のように記述可能です。

それぞれ空白をおいて記述してあり、並び順が重要になってきます。
記述しない場合は初期値が反映される形になっております。
初期値はそれぞれtransition-propertyがnone、transition-durationが0、transition-timing-functionがease、transiton-delayが0です。

transition-propertyには変更させたいプロパティ名をカンマ分けで記述できます。
それ以外の値だと、noneとallが使用可能で、今回はallを多用致しました。
allだと、trannsitionが適用可能な全てのプロパティが変化します。

transition-durationはtransition(変化)にかかる秒数を指定でき、デフォルトは0(アニメーションさせずにすぐに変化する)ので~sなどの値で秒数を指定します。

transition-timing-functionは変化のタイミングの指定のことで、簡単に言えば動きの緩急のつき具合を調整するものです。

基本的な概念はベジエ曲線(cubic-bezier(数値,数値,数値,数値))で表現する形になっておりますが、プロパティとしてはease、linear、ease-in、ease-out、ease-in-outの5つの値で簡単に表現できるようになっております。
それぞれのcubic-bazierで記述した場合の値は以下のようになっております。

  • ease・・・            cubic-bazier(0.25,0.1,0.25,1.0)
  • linear・・・         cubic-bazier(0,0,1.0,1.0)同等
  • ease-in・・・       cubic-bazier(0.42,0,1.0,1.0)同等
  • ease-out・・・     cubic-bazier(0,0,0.58,1.0)同等
  • ease-in-out・・・cubic-bazier(0.42,0,0.58,1.0)同等

Illutrator等でベジエ曲線を編集された方であれば経験があるとは思われますが、cubic-bazierのそれぞれの座標はこのようにイメージできます。

cubic-bazier-01

この中の1,4は固定なので、4つの値の中には2と3の値をそれぞれ(x2,y2,x3,y3)と記述します。

transitionプロパティはブラウザーによってはベンダープレフィクスで記述する必要がありますが、従来ではJqueryなどを使用する必要のあったなめらかなアニメーションをCSSのみで実装できるので、使い勝手は良いのではないかと思います。

2016-07-08

Advertisement

コメントを書く







コメント内容


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)