CSS

CSS3でアニメーションを実装|transitionプロパティを理解しよう

ここでは、transitionプロパティを使いこなすために必要な知識を身に着けていきます。今まで何となくコピペで使ってきたという方も、ここで使い方をマスターしましょう。CSS3には動きが表現できるプロパティとしてanimationプロパティなどもありますが、transitionプロパティはマウスオーバー(:hover)などのトリガーをきっかけに動きが始まるのが特徴です。

transitionプロパティの使い方

transitionプロパティには、下記の4つのプロパティとそのショートハンドがあります。まずは下記の表をご覧ください。

プロパティ 説明 初期値
transition-property 変化させたいプロパティの指定 all
transition-duration 変化が開始してから終わるまでの時間 0
transition-timing-function 変更速度の指定 ease(滑らか)
transition-delay 変化がいつ始まるかを指定 0
transition 上記をまとめたショートハンド

ちょっとややこしそうな感じがしますが、ひとつずつ見ていきましょう。

プロパティの指定をするtransition-property

transition-propertyは、transitionを適用させたいプロパティを指定するプロパティです。値のところには、border, font-size, widthなど、transitionを効かせたいCSSプロパティを指定します。初期値はallになっているのですべてのプロパティが有効になります。複数指定する場合はカンマ「,」で区切ってください。

下記にサンプルを用意しました。

ボタンで表示を切り替えてご覧ください。

See the Pen transition-property by kenichi (@ken81) on CodePen.

上記は、transition-propertyプロパティにそれぞれボックス内に表示されたプロパティを指定したサンプルです。ボックスをマウスオーバーして、どのプロパティが変化するか確認してみてください。

変化にかかる時間を指定するtransition-duration

transition-durationは、変化が開始してから終了するまでの時間を指定するプロパティです。単位は「秒(s)」または「ミリ秒(ms)」で指定します。例えば、1秒で変化させたいときは1sとなります。初期値は0になっています。

See the Pen transition-duration by kenichi (@ken81) on CodePen.

上記は背景色の変化にかかる時間をそれぞれ、0秒、1秒、2秒、3秒、4秒に設定したボックスです。

変更速度の指定をするtransition-timing-function

transition-timing-functionは変化のスピードの移り変わりを指定するプロパティです。下記のような値で指定できます。

説明
ease 開始と終了を滑らかに
linear 一定の速度で
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まりゆっくり終わる

実際にどのような変化になるのか、下記のボックスにマウスオーバーして確認してみてください。

See the Pen transition-timing-function by kenichi (@ken81) on CodePen.

変化がいつ始まるかを指定するtransition-delay

transition-delayは、マウスオーバーなどをしてから変化が始まるまでの時間を指定するプロパティです。これもtransition-durationプロパティと同じ様に「秒(s)」または「ミリ秒(ms)」で指定します。下記にサンプルがありますので、マウスオーバーしてから変化するまでの時間差を確認してみてください。

See the Pen transition-delay by kenichi (@ken81) on CodePen.

transitionプロパティ

最後は、今までご紹介したプロパティをショートハンドできるtransitionプロパティです。値の説明は大丈夫だと思いますので、値を半角スペースを空けて下記の順番で指定します。

ショートハンドで値を指定する順番
  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
transition: property duration timing-function delay;

transitionプロパティのブラウザ対応状況は?

transitionプロパティは、よくベンダープレフィックスで記載される方法が紹介されていますが、今現在どうなっているのか確認してみましょう。下記は現在のリアルタイムなブラウザの対応状況です。

https://caniuse.com/#search=transition

対応
一部対応
未対応

この記事を公開した時点から状況が変わっている場合もありますので、上記のブラウザの状況に合わせてベンダープレフィックスの必要・不必要を決めてくださいね。

ブラウザ対応状況の詳しい説明は下記の記事をご参照ください。

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP