ロールオーバーでふわっとした動きをつける

ボタンやテキストなどリンクが張られた箇所にカーソルを合わせたとき、ふわっとした動きをしながらロールオーバーさせる方法を紹介します。動きにちょっとした変化をつけたいときなどに使ってみるのも良いかもしれません。

通常のロールオーバーであれば、マウスオンしたら色が瞬時に変わるという動きをします。

これにふわっとした動きを加えるには、CSS3の機能にある「transition」というプロパティを使って実現させます。

.sample a {
  display: block;
  padding: 10px 0;
  border: 1px solid #333;
  text-align: center;
  transition-property: all;
  transition: 0.3s linear;
}

.sample a:hover {
  background: #333;
  color: #fff;
}

「transition-property: all;」は、どのプロパティの値が変更されたときにtransitionを実行させるかということで、ここでは「all」と指定してtransitionの適用が可能なすべてのプロパティに適用させています。
「transition: 0.3s linear;」は、変化する時間と変化の仕方について指定してます。この場合、0.3秒かけて一定の速度で変化します。今回はまとめて指定してありますが、「transition-duration: 0.3s;」「transition-timing-function: linear;」とそれぞれわけて指定することもできます。

このようにちょっとしたアニメーション的な動きをつけるだけでも雰囲気が変わったりするので、機会があれば試してみてください。