CSSアニメーション「CSS Transition」

CSSアニメーションには
CSS TransitionとCSS Animationの2つの実装方法があります。
2つの違いについてはこちらの記事で紹介しています。
 
今回は CSS Transition についておさらいしていきたいと思います。

CSS Transition（CSS トランジション）とは？

要素に時間的変化を指定できるプロパティです。
単純な動きのアニメーションを実装する時に利用します。

 

■まずは簡単なDEMO！

下のAとBにマウスを当ててみてください。

 

 

Transitionを適用していないAは瞬時に透過するのに対し、
Transitionを適用しているBはゆっくりと透過します。

CSS Transitionの使い方

前項のDEMOを元に、簡単にTransitionの使い方について説明します。
 
まずは変化前と変化後を指定します。

まだこの状態ではアニメーションにはなりません。
DEMOのAの状態です。
 
ここにtransitionプロパティ（4、5行目）を加えます。
細かい記述の意味は次項で説明します。

これでBの動きになります。

CSS Transitionプロパティ

transitionは以下のように指定します。
 
transition: transition-property transition-duration transition-timing-function transition-delay ;
 
記述の順序については、「transition-duration」を「transition-delay」より、必ず先に記述するようにだけ注意しましょう。
 

transition-property	transitionを適用するCSSのプロパティを指定します プロパティ名 変化させるプロパティ名を指定します。 複数指定する場合はカンマ（ , ）区切りで指定します。 【例】transition-property: background-color, width, height; all 変化を適用できるプロパティすべてが変化します（初期値） none どのプロパティも変化しません
transition-duration	アニメーションに掛かる時間を指定します（初期値は0） 単位は秒（s）またはミリ秒（ms）です。 初期値は0sでアニメーションしません。 1sとすると、1秒かけて変化し、0.5sとすると0.5秒かけて変化します。
transition-timing-function	アニメーションのパターンを指定します ease 出だしと終わりを滑らかに（初期値） linear 一定で動く ease-in ゆっくり始まる ease-out ゆっくり終わる ease-in-out ゆっくり始まりゆっくり終わる cubic-bezier 自分で動きを指定　(数値, 数値, 数値, 数値)
transition-delay	アニメーションがはじまるまでの遅延時間を設定します 単位は秒（s）またはミリ秒（ms）です。 初期値は0sで、すぐにアニメーションが始まります。 3sとすると、3秒後にアニメーションが始まります。

 

■個別に記述も可能
以下のように個別に記述することもできます。

対応ブラウザ

IEは10以上、
Chrome、Safari、FireFox、Operaでも古いバージョンの場合は、ベンダープレフィックスを指定しないと正常に動作しない場合があります。

 

次回は、「CSS Animetion」について触れてみたいと思います！