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

関連記事

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

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

[超初心者] CSSの書き方

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

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …