CSS: 画像をCSS animation を使ってクルクルまわす。

HTML&CSS

fujihara

2014.09.22

どうもfujiharaです。最近、掛け布団の量が難しい季節ですね。
皆さん体調管理には十分ご注意下さい。ちなみに私は風邪引きました。

先日、業務で先輩社員から以下のような依頼を受けました。
先輩
『アイコンを3つ並べてあるから、左から順番にクルッ、クルッ、クルッとJSで回して下さい。 rotate ってクラスを与えてあげて、animationend でイケるから～』。　

私
『なるほど、画像のCSS animation 終了で次の画像にrotate クラスを与えてあげれば良いワケね』。イメージとしては以下の画像になります。

CSS

まずはCSSを見ていきます。以下のように書かれています。


<style>
.rotate {
  -webkit-animation: spin 0.4s ease-in-out 1;
  -moz-animation: spin 0.4s ease-in-out 1;
  animation: spin 0.4s ease-in-out 1;
}
@-moz-keyframes spin { 
  0% {-webkit-transform: rotate(0deg);}
　100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  0% {-moz-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  0% {transform: rotate(0deg);}
  100% { -webkit-transform: rotate(1440deg); transform:rotate(360deg); } 
}
</style>

以下JSになります。


<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var startIndex = 0;
var targetImg = $('img');
$('img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
  $(this).removeClass('rotate');
  startIndex++;
  var $target = targetImg[startIndex%3];
  $target.addClass('rotate');
});
targetImg[0].addClass('rotate');
</script>

簡単に説明しますと、画像に 0 , 1 , 2 とインデックスがついていますので、animation 終了後毎に画像から rotate　クラスを削除し、次の画像に rotateクラスを与えてあげています。 %3 としたのは画像が3つなので、startIndex がどんどん増えていった場合の対応となります。
イベントはブラウザによって異なりますので animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd　と複数登録しています。

まとめ

以上で、画像クルクル処理の完了です。
初めてこの処理を組み込もうとした際に、animationend ではなく transitionend で全てのイベントを網羅できると勝手に思い込んでいて全然動かなかった記憶があります。
transitionend で取得できるにはCSS側に transition用の記述をする必要がありました。
心の隅にでも置いといて下さい。