CSS3アニメーションに触れてみる（3） - entacl Lab.スプライトシートアニメーション マウスオーバーでスプライトシートアニメーション ※画像にマウスオーバーして下さい。 #sprite { cursor: pointer; background: url(/sample/2012/img/sprite.png) no-repeat left top; width: 240px; height: 110px } #sprite:hover { -webkit-animation: sprite-animation 2s steps(32) infinite } @-webkit-keyframes sprite-animation { 0% {background-position: 0px 0} 100% {background-position: -7680px 0} } マウスオーバーするとスプライトシートアニメーションが実行されますね。
CSS3アニメーションに触れてみる（2） - entacl Lab.
CSS3アニメーションに触れてみる - entacl Lab.
