(CSS)マウスホバーしたときのアニメーションにtransitionプロパティ

CSSによる簡単なアニメーションの実装にはtransition プロパティを使用する方法があります。transition を直訳すると「推移」となり、移り変わるさまを表現することが可能なプロパティであることが言葉からも伺えますね。

まずは、実装例から見ていきましょう。

上記サンプル中にて transition プロパティが使われている箇所は CSS a.btn_set に記述されているプロパティ群の一番最後の行にあります。

サンプルのようにマウスホバー時に、トランジション効果を考える際は、擬似クラスの :hover を使います。

要素名:hover のところに変化後のスタイルを記述することでマウスホバー時に反映されます。

transition は、反映のされ方を取り扱うプロパティとも言えますね。

また、サンプルの中で使われているtransitionプロパティの記述方法はショートハンドと呼ばれる、省略した書き方をしています。

サンプルからも分かる通り、 transition プロパティは基本的に4つの値を組み合わせて使用します。

1つ目の値 transition-property は、トランジション効果を付与するプロパティ名を記述します。初期値は all となっており、省略または all と記述した場合は全てのプロパティを対象とした意味となります。

2つ目の値 transition-duration は、トランジション効果の時間を表すプロパティで指定は数値で行い、単位は second(秒) を示す「s」を使います。初期値は 0s となっており省略した場合は切り替わる感じになります。

3つ目の値 transition-timing-function は、transitionプロパティを使用する真骨頂です。初期値は ease であり、基本的にはlinear ease ease-in ease-out ease-in-out の中から選択して利用します。詳しくは後述します。

4つ目の値 transition-delay は、トランジション効果を行うまでの遅延効果を発生させることができます。初期値は 0s で使用する単位は duration と同じ「s」を使います。

ここまでの transition プロパティについての記述方式はショートハンドを用いたもので解説してきましたが、さっき紹介した transition-property、 transition-duration、 transition-timing-function、 transition-delay、 のように１個づつ記述することもできます。

先ほどは省略しました、transition-timing-functionのところでは、linear、 ease ease-in、 ease-out、 ease-in-out、 というデフォルトで決まっている名称を使用した値に加えて、その他にも cubic-bezier() や steps() などの関数値の使用ができます。

もっと詳しく

名称だけではよく分からないかも知れません。こちらに可視化したものを一覧で用意しました。

CSS3 イージング関数【 一覧 】