CSSの:hoverアニメーションで、マウスオーバー／アウト時の処理を変化させる

:hover擬似クラスとCSSアニメーションを組み合わせることで、ボタン要素などの簡易的なマウスオーバーアニメーションを実現できます。

1秒かけて背景色がアニメーションするボタン

HTML

<button type="button">ボタン</button>

CSS

button {
    background-color: #f00;

    /* 1秒かけて背景色をアニメーションさせる */
    transition: background-color 1s;
}

button:hover {
    /* マウスオーバー時に背景色をグレーに変更 */
    background-color: #333;
}

See the Pen pozWWGO by Sho Uchida (@shouchida) on CodePen.

マウスアウト時はもっと素早く変化させたい

上記の例では、マウスオーバー時とマウスアウト時のアニメーション速度はどちらも「1秒」になります。

「マウスアウト時のアニメーション速度は0.5秒にしたい」など、マウスオーバー／アウト時の処理を変化させたい場合は、通常時と:hover擬似クラスの両方に transition プロパティを指定します。

CSS

button {
    background-color: #f00;

    /* マウスアウト時、0.5秒かけて背景色をアニメーションさせる */
    transition: background-color 0.5s;
}

button:hover {
    background-color: #333;

    /* マウスオーバー時、1秒かけて背景色をアニメーションさせる */
    transition: background-color 1s;
}

See the Pen mdbBBNm by Sho Uchida (@shouchida) on CodePen.

アニメーション対象プロパティを増やして複雑な動きを実現する

transition プロパティは、対象とするCSSプロパティを「カンマ区切りで複数」設定できるため、記述の仕方によってより複雑なアニメーションも実現できます。

下記の例では background-color と border-radius の2つのプロパティをそれぞれ異なる速度で変化させています。

CSS

button {
    background-color: #f00;
    transition: background-color 0.5s, border-radius 1s;
}

button:hover {
    background-color: #333;
    border-radius: 20px;
    transition: background-color 1s, border-radius 2s;
}

See the Pen jONGGgv by Sho Uchida (@shouchida) on CodePen.