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のタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …