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

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

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

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


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

20140922_fujihara.png

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用の記述をする必要がありました。
心の隅にでも置いといて下さい。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ