1分で読める！【CSS】アニメーションの発動時間を指定する方法

本日のテーマは、

アニメーションの発動時間を指定する方法です。

CSSで「:hover」「:active」などを使用し要素に動きをつける際に、

要素がどれだけの時間をかけて動くのかを指定する方法です。

使用するプロパティ

結論から言うと、

transitionプロパティを使用します。

＜サンプルコード＞

.image-box{
　transition: 0.7s;
}

指定する時間は0.6sや1.2sなどで指定できます。

※sは秒数(Second)の単位

個人的にいい感じになる秒数は0.7ぐらいです。