リンクなどをマウスのポインターを乗せた時に文字が動いたり背景がゆっくり変わったりする物をよくみるのですが、どうやって作っているんですかね・・
それはマウスをおいた時の動作 hover を行った時に文字を動かしたり、背景を変えたりするクラスをjqueryで付与したり、cssで動きをつけたりしていますね。
cssでもマウスをhoverした時にアニメーションをつけることができるんですね。
cssでもアニメーションをつけることは可能ですね。今回は簡単なサンプルをふまえながらcssでアニメーションをつけていきましょう。
今回は、cssでリンクをhover（マウスをリンクの上におく動作）した時に、アニメーションをつける方法について説明していきたいと思います。考え方としましては、hover前とhover後の動作にdelayをかけることで視覚的にアニメーションが発生しているように見えるように行います。
<a class="link_sample1" href="">リンクの背景がゆっくり変化します。</a>
<a class="link_sample2" href="">リンクの文字が１文字分だけゆっくりずれます。</a>
<a class="link_sample3" href="">リンクの文字が横回転します。</a>.link_sample1{
transition:1s all;
}
.link_sample1:hover{
transition:1s all;
background:#ccc;
}
.link_sample2{
transition:1s all;
}
.link_sample2:hover{
padding-left:1em;
transition:1s all;
}
.link_sample3{
transition:1s all;
display:inline-block;
}
.link_sample3:hover{
transform:rotateY(360deg);
transition:1s all;
}上記のように様々なアニメーションをcssで行うことができます。
ぜひ試して見てください。