designWeb全般webmasterデザインメモTOPコーディングCSSロールオーバーでふわっとした動きをつけるボタンやテキストなどリンクが張られた箇所にカーソルを合わせたとき、ふわっとした動きをしながらロールオーバーさせる方法を紹介します。動きにちょっとした変化をつけたいときなどに使ってみるのも良いかもしれません。通常のロールオーバーであれば、マウスオンしたら色が瞬時に変わるという動きをします。rolloverこれにふわっとした動きを加えるには、CSS3の機能にある「transition」というプロパティを使って実現させます。all;」は、どのプロパティの値が変更されたときにtransitionを実行させるかということで、ここでは「all」と指定してtransitionの適用が可能なすべてのプロパティに適用させています。linear;」は、変化する時間と変化の仕方について指定してます。この場合、0.3秒かけて一定の速度で変化します。linear;」とそれぞれわけて指定することもできます。rolloverこのようにちょっとしたアニメーション的な動きをつけるだけでも雰囲気が変わったりするので、機会があれば試してみてください。