CSSで実装するホバーエフェクト

アニメーション・エフェクトを使用すれば、ウェブサイトのデザインを魅力的に魅せるだけでなく、ユーザーの注目を集めることができます。
今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。

ホバー時にアニメーションさせるには「transition」というプロパティを使用します。

■transition　プロパティ　時間　アニメーション;
最初のプロパティはアニメーションさせるプロパティを指定します。例えば「all」とすれば設定したすべてのプロパティがアニメーションされます。
アニメーションの種類は「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定することができます。

.transition01{
transition: background-color 3s linear 0.1s;
}

.transition01:hover{
background-color: red;
}