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 プロパティを指定します。