CSSでhoverアクションをアニメーションにする

transition:0.3s;

hover前のセレクタに、transitionというCSSを入れ込めば、簡単にアニメーションにできます。

プロパティー値はアニメーションの秒数を入れ込みます。

「0.3s」と入れ込めば、0.3秒でアニメーションします。

例は、こちら。

a {
    text-decoration: none;
    background: #f00;
    display: block;
    width: 200px;
    padding: 10px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    /* 0.3秒でアニメーションする */
    transition: 0.3s;
}

a:hover {
    background: #00f;
}

ボタンの色が赤から青に切り替わるアニメーション。

アニメーションを入れることにより、サイトを少しリッチにできます。