transitionについてのメモ
transitionとは
プロパティを変更するときにどのように変化させるかを設定できるプロパティ！
.boxに定義された値・・・transitionのスタート値
.box:hoverに定義された値・・・transitonのゴール値
CSSアニメーションの基礎【Transitionを使ってみる】 | キタックCGソリューションセンター｜Webマーケティング
もし、hover時に適用するスタイルが合った場合、:hoverに記述したスタイルがアニメーション後のスタイルになる
プロパティ
指定する値は以下の通り
transition-duration: かける時間transition-property: 適用するプロパティ名transition-timing-funciton: 変化の仕方transition-delay: 始まるまでの時間
transitionでは、上の4つを1度に指定できる
transition-duration
始まりから終わりまでの時間を指定できる
transition-duration: 時間(ms, s);
かける時間を1000msと300msとした場合
transition-duration: 1000ms;
See the Pen transition-duration by tamago (@tamago324) on CodePen.
transition-peorperty
transition-propertyでtransitionを適用させるプロパティを指定することができる
widthだけにtransitionの効果を適用とかもできる
transition-property: プロパティ名;
設定できるキーワードがいくつかある
none: transitionを適用しないall: すべてのプロパティに対して適用する
例）background-colorとwidthを変化させるとき、transitionをwidthだけに適用する
transition-property: width;
See the Pen transition-property by tamago (@tamago324) on CodePen.
横幅の変化だけ、transitionが適用されているのがわかる
transition-timing-function
transition-timing-functionでtransitionの進行度とタイミング(変化の仕方)を指定できる
値として設定できるキーワードがいくつかある
easelinearease-inease-outease-in-out
また、cubic-bezier()関数を使うことでいろいろな動きができる
See the Pen transition-timing-function by tamago (@tamago324) on CodePen.
cubix-bezier関数で実現できる例を見れるサイト
cubic-bezierでも表現できないものに関しては@keyframeのアニメーションで実装するらしい
transition-delay
transition-delayで開始を遅らせる時間を指定する
transition-delay: 数値;
単位はmsとsのどちらかで記述できる
transition-delay: 500ms; // 0.5s
See the Pen transition-timing-function by tamago (@tamago324) on CodePen.
