ケートミィ・メディアラボCSSアニメーションについて(その2)-Webデザイン、モーションデザインに関する役立つネタやTipsなどを不定期で更新中しております。前回のエントリーに引き続き、CSSアニメーションについて研究を進めて参りたいと思います。前回、CSSアニメーションはtransitionとanimationの2種類のプロパティのうち、animationのみの解説をしていたと思うので、今回は残るtransitionについて記事を書いてみたいと思います。※今回のサンプルデータは下記URLから確認できます。(https://k-103i.com/anime/button-transition/index.html)transformプロパティの4つの値(transrate、scale,rotate,skew)と、box-shadowを使ってそれぞれtransitionを有効にした場合のサンプルを用意致しました。以下にサンプルで使用したコードを書き出しております。scale(1.2,1.2);}transitionについてtransitionには(transition-property、transition-duration、transition-timing-function、transiton-delay)の全部で4つのプロパティをショートハンドで記述することが出来ます。下記のように記述可能です。1s;それぞれ空白をおいて記述してあり、並び順が重要になってきます。記述しない場合は初期値が反映される形になっております。初期値はそれぞれ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で記述した場合の値は以下のようになっております。cubic-bazier(0,0,0.58,1.0)同等ease-in-out・・・cubic-bazier(0.42,0,0.58,1.0)同等Illutrator等でベジエ曲線を編集された方であれば経験があるとは思われますが、cubic-bazierのそれぞれの座標はこのようにイメージできます。この中の1,4は固定なので、4つの値の中には2と3の値をそれぞれ(x2,y2,x3,y3)と記述します。transitionプロパティはブラウザーによってはベンダープレフィクスで記述する必要がありますが、従来ではJqueryなどを使用する必要のあったなめらかなアニメーションをCSSのみで実装できるので、使い勝手は良いのではないかと思います。date*日本語が含まれない投稿は無視されますのでご注意ください。主な制作物についての料金を掲載しています。未掲載のサービスにつきましては、問い合わせフォームよりお気軽にお問い合わせください。ケートミィ・メディアラボ。