リンクの色をゆっくりと変える

css3です。
css3おぼえなきゃなー、と思うのですがチートシート見ずにはに書けない。

リンクの色をゆっくりと変えるのはtransitionを使用。
リンクにこれ付けるだけでも意外と違います。

html

<div id="default">
<a href="#">リンク</a>
</div>

css

#default a  {color:#777;
             -webkit-transition:0.3s;
             transition:0.3s;}

#default a:hover  {color:#008080;}

※cssの’-webkit-transition’はsafariブラウザを対応させるためのもの

  • コーダーのための計算機