CODING

[CSS] 変化Transitionの使い方

投稿日:2019年11月13日 更新日:


どうも、べ〜やんです。

今回は、変化の詳細を指定するTransitionを紹介します。

CSSだけで設定できるので初心者の方にもおすすめですよ。





Transitionとは

transitionとは:hoverなどでデザインを変化させるときに、変化のタイミングやスピードなどを指定するプロパティです。

ホバーしてすぐに変化が始まるか、少し時間を置いて変化が始まるかや、

ゆっくり変化していくか、スピーディーに変化していくかなどが指定できます。

transitionには5つのプロパティがあります。

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とすると2秒後に変化が始まります。

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-propertytransitionを適用するプロパティを限定します。

今回は、transition-property: width;を指定してtransitionを適用するのをwidthのみに限定しました。なので色はすぐに変わりますが横幅は4秒かけて変化します。

See the Pen VwwGXdJ by beeyan (@orientado) on CodePen.


transition

transitionは上記のプロパティをひとまとめにできるプロパティです。

値はtransition-propertytransition-durationtransition-timing-functiontransition-delay(プロパティの限定、変化が始まって終わるまでの時間、変化の度合い、変化が始まるタイミング)の順番で指定します。

複数のプロパティに指定する場合は( , )で区切って指定します。

See the Pen NWWLYJj by beeyan (@orientado) on CodePen.


おわりに


今回は、変化の詳細を指定するTransitionを紹介しました。

CSSのみで使用できるので簡単で便利ですね。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …