CSS3 transitionを使ったサンプルです。
テキストを大きくする
CSSコードとHTML
.anime04{ font-size:15px; color:#000; padding:25px; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .anime04:hover{ font-size:65px; } 中略 <div class="anime04"> 大きくなります </div>
大きくなります
色を変える
CSSコードとHTML
.anime04a{ font:35px bold; color:#000; padding:25px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .anime04a:hover{ color:#ff0000; } 中略 <div class="anime04a"> 色が変わります </div>
色が変わります
テキストに影をつける
CSSコードとHTML
.anime03a{ font:25px bold; color:#000; padding:25px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .anime03a:hover{ text-shadow: 10px 3px 15px #800000; } 中略 <div class="anime03a"> テキストから影がでます </div>
テキストから影がでます