どうも、べ〜やんです。
今回は、変化の詳細を指定するTransitionを紹介します。
CSSだけで設定できるので初心者の方にもおすすめですよ。
目次
Transitionとは
transitionとは:hoverなどでデザインを変化させるときに、変化のタイミングやスピードなどを指定するプロパティです。
ホバーしてすぐに変化が始まるか、少し時間を置いて変化が始まるかや、
ゆっくり変化していくか、スピーディーに変化していくかなどが指定できます。
transitionには５つのプロパティがあります。
transition-delay: 値; /* 変化が始まるタイミング */
transition-duration: 値; /* 変化が始まって終わるまでの時間 */
transition-timing-function: 値; /* 変化の度合い */
transition-property: 値; /* プロパティを限定 */
transition: 値; /* ショートハンドプロパティ */それでは使い方を紹介していきます。
使い方
まずはtransitionなしで:hoverで大きさと色が変わるように指定しました。
ホバーすると一瞬で変化します。
See the Pen wvvEyPZ by beeyan (@orientado) on CodePen.
このままでは味気ない場合などに、transitionを使いします。
transition-delay
transition-delayは変化するタイミングを指定します。
今回はホバーして何秒後に変化が始まるかを指定してみます。
例えば値を2sとすると２秒後に変化が始まります。
See the Pen OJJovMJ by beeyan (@orientado) on CodePen.
transition-duration
transition-durationは変化が始まって終わるまでの時間を指定します。
See the Pen MWWqVeo by beeyan (@orientado) on CodePen.
transition-timing-function
transition-timing-functionは変化の度合いを指定します。
値は以下の通り
transition-timing-function: ease; /* 最初と最後が緩やかに(デフォルト) */
transition-timing-function: linear; /* 一定の度合いで */
transition-timing-function: ease-in; /* 最初が緩やか */
transition-timing-function: ease-out; /* 最後が緩やか */
transition-timing-function: ease-in-out; /* 最初と最後がすごく緩やかに */
transition-timing-function: cubic-bezier(); /* 3次ベジェ曲線で指定 */See the Pen BaaOrJK by beeyan (@orientado) on CodePen.
最後の3次ベジェ曲線はあまり使用しませんし少し難しいと思います。今回は詳しい説明はしません、また違う機会に紹介します。
最後の3次ベジェ曲線は少し面白い動きをする指定にしてみました。
transition-property
transition-propertyはtransitionを適用するプロパティを限定します。
今回は、transition-property: width;を指定してtransitionを適用するのをwidthのみに限定しました。なので色はすぐに変わりますが横幅は４秒かけて変化します。
See the Pen VwwGXdJ by beeyan (@orientado) on CodePen.
transition
transitionは上記のプロパティをひとまとめにできるプロパティです。
値はtransition-property、transition-duration、transition-timing-function、transition-delay（プロパティの限定、変化が始まって終わるまでの時間、変化の度合い、変化が始まるタイミング）の順番で指定します。
複数のプロパティに指定する場合は（ , ）で区切って指定します。
See the Pen NWWLYJj by beeyan (@orientado) on CodePen.
おわりに
今回は、変化の詳細を指定するTransitionを紹介しました。
CSSのみで使用できるので簡単で便利ですね。
