CSS transitionプロパティの使い方

ホバー時にテキストカラーを変更したり、スクロールしたら表示されるようにするなど、特定の動作によって初期のスタイルから別のスタイルへ変更させたいことは多々あります。

CSSのトランジションは、上記のようにCSSプロパティの値が変化する際の速度を指定するものです。指定がなければすぐに変更されてしまいますが、transitionプロパティを設定することで、変化の速度を調整することができます。

そんなCSSの transitionプロパティの基本の使い方メモです。

transition プロパティで指定できること

transitionプロパティはショートハンドプロパティで、以下のプロパティを一括で指定することができます。

transition で一括指定せず、上記プロパティをそれぞれ設定することもできます。
ショートハンドを使用するメリットは、複数のプロパティの記述を省略できること、指定する必要があるプロパティのいくつかが既定値でよければ値の省略もできることです。

状況に応じて、また自分が分かりやすい方で使い分けていきましょう。

使い方

transitionプロパティで指定する際に必ずつける値は transition-duration 。このプロパティの既定値が 0s で、この場合アニメーションは実行されません。そのため 0 より大きい値を指定する必要があります。

他のプロパティの既定値はアニメーション自体は表示される値のため、そのままで問題なければ transition-duration の値だけを設定して変化をさせることができます。

<p class="hover">ホバーすると赤に変わります。</p>

.hover {
  display: inline-block;
  color: black;
  transition: 3s;
}
.hover:hover {
  color: red;
  transition: 1s;
}

上記コードで、ホバーしたらテキストカラーが設定した時間をかけて変化します。

.hover:hover に設定したものがホバーした時に変化する時間、 .hover に指定した時間が戻り時間です。（赤になるまで1秒、黒になるまで3秒）

時間の単位は s と ms が使用できます。1s なら1秒、100ms なら0.1秒です。

記述順序

ショートハンドで指定する際に気をつけたいのが記述順序です。duration と delay はどちらも時間単位で指定するため、記述順序によってどちらの値を指定しているかが認識されます。先に書かれた方が duration で、後に書かれた方が delay の値になります。

<p class="hover pattern01">「transition: .3s 2s;」で指定</p>
<p class="hover pattern02">「transition: 2s .3s;」で指定</p>

「pattern01」はホバーして2秒経った後に0.3秒かけてカラーが変化、「pattern02」は0.3秒後に2秒かけてカラーが変化します。

複数指定

【ショートハンドの場合】

複数のプロパティを、それぞれ異なるタイミングやイージングでかける場合は、カンマ「,」で区切って指定ます。

<p class="transition_box">ホバーしたら回転</p>

.transition_box {
  background-color: transparent;
  border: 2px solid #000;
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  rotate: 0deg;
  transition: rotate .3s, background-color 1s;
}
.transition_box:hover {
  background-color: yellow;
  rotate: 30deg;
  transition: rotate .5s ease-in, background-color 1s ease-out .5s;
}

【プロパティを分ける場合】

トランジションの内容によってはこちらの方が、簡単で分かりやすいかと思います。

例えば複数のプロパティを指定し、同じ時間・イージングであれば以下のようにすればOK。複数指定はこちらもカンマで区切ります。

.transition_box:hover {
  background-color: yellow;
  width: 130px;
  height: 120px;
  rotate: 30deg;
  transition-property: background-color, rotate, width, height;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; 
}

プロパティ以外にも分けたい場合は、transition-property の記述順序と同様に設定します。

.transition_box:hover {
  background-color: yellow;
  width: 130px;
  height: 120px;
  rotate: 30deg;
  transition-property: background-color, rotate, width, height;
  transition-delay: 0.5s, 0.5s, 0.1s, 0.1s;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

イージング

イージングは動きの速度に緩急を付けることで、アニメーションの印象に影響を大きく左右します。
transition-timing-function でその指定をすることができます。