CSSのtranstionプロパティで動きを付ける方法

動きのあるWebデザインを実現させるためには、JavaScriptの使用を考える方が多いでしょう。しかし、CSS3からはtransitionやanimateを使うことでCSSでのアニメーションを実現させることが出来るようになりました。

今回はtransitionプロパティを使って動きをつける方法をご紹介します。transitionプロパティでは、あるものからあるものへ変化する時の効果を設定することができます。 

transitionプロパティの使い方

transitionのプロパティには、４種類あり、これを組み合わせて指定することで理想の動きを実現していきます。

transition-property

トランジションを適用するプロパティを指定します。指定したプロパティに動きがつくことになります。

transition-duration

プロパティが動作する時間の指定を行います。

transition-timing-function

プロパティの動作の種類の指定を行います。

transition-delay

動きが始まるまでの待機時間の指定を行います。

transition

transitionのみで、上記の４つを記載せずに、ショートハンドとして指定を行うこともできます。

記述例

マウスオーバーで背景が赤くなる動きをつけたtransitionのサンプルです。

.sample {
    width:200px;
    height:200px;
    background:#ffffff;
    border:1px solid black;
    transition-property:background;
    transition-duration:1s;
    transition-timing-function:linear;
}
.sample:hover{
    background:red;
}

今回は動きのあるWebデザインの設定ができるtransitionプロパティの紹介をしました。簡単な動きであればCSSのほうで書いてしまいましょう。