CSSアニメーションを使って、要素をクルッと回転させる方法をご紹介いたします。
簡単なデモページを作成したので、動きについては以下デモページをご確認ください。
CSSアニメーションで要素をクルッと回転させる方法
今回はデモページのように画像を回転させることにします。
HTMLは以下のようにシンプルで、rotationというクラスで内包した画像を配置します。必ずしもdivで内包する必要はありませんが、他の要素と区別するために内包しています。
<div class="rotation"><img src="sample.jpg" alt=""></div>
CSSでは、次のように指定します。
.rotation img {
animation: rotation 1.5s ease 2s infinite normal none running;
}
@keyframes rotation {
0% {
transform: rotateY(0deg);
}
50%{
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframesでアニメーションを定義して、.rotation配下のimgにアニメーションを加えます。
アニメーションは、「transform: rotateY()」で水平方向の回転を定義しています。
animationプロパティには、以下の項目が指定できますので、それぞれ順番に指定しています。
| animation-name | @keyframesで定義したアニメーションの名前 |
| animation-duration | アニメーションの開始から終了までの時間 |
| animation-timing-function | アニメーションの動き方 |
| animation-delay | アニメーションを開始するまでの遅延時間 |
| animation-iteration-count | アニメーションの再生回数。infiniteは無限ループ |
| animation-direction | アニメーションの再生方向。reverseで逆再生 |
| animation-fill-mode | @keyframesで指定したプロパティをアニメーション再生前後に適用するかどうか。forwardsで再生後に適用 |
| animation-play-state | 再生中か一時停止か。pausedで一時停止 |
今回は無限ループにしていますが、「animation-iteration-count」で数字を指定すれば、指定した回数だけアニメーションを再生できます。
あとがき
CSSアニメーションの登場で、本当に色んなことができるようになりましたね。参考になれば幸いです。