CSS3 transitionのサンプル

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>
テキストから影がでます