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エフェクト紹介サイト!CSSFX

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

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

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

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

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …