Posted at

シュッとしてジワーッと戻るCSS transitionの例

More than 5 years have passed since last update.

要素にhoverすると背景色がジワリと変化していくCSSを書くと以下のようになると思います。

.sample {

padding: 20px;
background-color: #efefef;
transition: background-color 1s linear;
}
.sample:hover {
background-color: green;
}

これを指定した .sample の要素に対してhoverすると、1秒かけて背景色が薄いグレーからグリーンになります。

よく見るサンプルですね。

ただしこのままだと、hoverしたときと外れた時の両方ともtransitionが適用されてしまいます。

hoverした時は素早くtransitionを行い、外れる時はゆっくりと変化させる場合はどうするか。

簡単です。hover側にtransitionのコードを追加すればいいのです。

.sample {

padding: 20px;
background-color: #efefef;
transition: background-color 1s linear;
}
.sample:hover {
background-color: green;
transition: background-color 0.1s linear; /* 追加 */
}

この使い方が分かると、よりプロフェッショナルな感じのアニメーションを実装できるようになります。

色々試してみてください。

サンプルはjsFiddleに置いておきます。

http://jsfiddle.net/nantekkotai/MjjTA/