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

要素に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/