CSSアニメーションで要素をクルッと回転させる方法

CSSアニメーションで要素をクルッと回転させる方法

CSSアニメーションで要素をクルッと回転させる方法

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アニメーションの登場で、本当に色んなことができるようになりましたね。参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です