俺がCSSでアニメーションするためにやった事

#sign {
  animation: rotate 3s;
  animation-iteration-count: infinite;
  -webkit-animation: rotate 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: infinite;
}
@keyframes rotate { 
  0% { transform: rotate(3deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); } 
  100% { transform: rotate(3deg); } 
}
@-webkit-keyframes rotate { /*Safari & Chrome */ 
  0% { -webkit-transform: rotate(3deg); }
  25% { -webkit-transform: rotate(-3deg); }
  50% { -webkit-transform: rotate(3deg); }
  75% { -webkit-transform: rotate(-3deg); }
  100% { -webkit-transform: rotate(3deg); } 
} 
<div id="sign">
<a href="http://aimelo.com/contact/"><img src="wp-content/themes/aimelo/images/top/sign.png" width="501" height="415" alt="出演者募集中!"></a>
</div><!--/#sign-->

なんかこんなことした。
http://aimelo.com/
ここで使った。
blog

コメントを残す