リンクをhoverしたときにゆっくり色が変わるCSS

こんにちは、こやぎwebの枝川です(降((((( \(・_・)/ )))))臨)
いつもここのブログを書くとき、何を書こうか戸惑うのですが、やっと答えを見つけました。
 
この こやぎwebのサイトを作るときに使用したcssを紹介すればいいんだ!
 
天才ですね。答えを見つけた私はもう無敵です。
ということで、無敵になった私がこのサイトで使用しているcssを少しずつ紹介していきます₍₍ (ง ˙ω˙)ว ⁾⁾
今回紹介するcssは説明するより見て頂いた方が早いので、とりあえずデモを見て第六感で感じてください。

 
 
リンクをhoverしたときにゆっくり色が変わるCSS

▼ Demo

ふわっ。

↑マウスを乗せると、背景色がゆっくり変化します。

▼ CSS

.a {
  background-color: #0055a0;
  border: 1px solid #0055a0;
  -webkit-transition: 0.8s ease;
  -moz-transition: 0.8s ease;
  -o-transition: 0.8s ease;
  -ms-transition: 0.8s ease;
  transition: 0.8s ease;

}
 
.a:hover {
  background-color: #fff;
  border: 1px solid #0055a0;
  color: #0055a0;
}

★0.8s の部分が変化スピードなので、お好みで変更してください。数字が大きい程時間が長くなります。
★その後ろの ease は変化の速度を表し「ease=滑らか」「linear=一定速度」などの指定があります。
★速度を指定するのは :hover ではないことに注意。
 
 
女性の仕草がゆっくりしていると上品で魅力的に見えるように、hoverもゆっくりさせるだけでなんだか上品な気がしてきます。
こういう女性になりたいものですね。
 
ただし何事もやりすぎは禁物です。
ゆっくりさせすぎるとあんまり良くないので、ユーザーに不快を与えない適度なスピードでとどめておくことをオススメします。