【CSSアニメーション】画像や要素を回転させる方法

RELEASE / 2024.5.16 UPDATE / 2024.05.16

@keyframes

CSSアニメーション

回転

無限ループ

一昔前まではWebサイトでアニメーションを表現する場合、JavaScriptやjQueryを使って表現することが一般的でした。
しかし、CSS3になりCSSだけでアニメーションを表現出来るようになって、Webサイトはますます華やかなアニメーションのWebサイトが作られるようになりました。

この記事ではCSSアニメーションを使って画像や要素を回転させる方法をご紹介したいと思います。

この記事の目次を表示

1 画像や要素を回転させる方法
- 1.1 1回だけ回転させる方法
- 1.2 回転を無限ループさせる方法
2 まとめ

画像や要素を回転させる方法

CSSアニメーションを使って画像や要素を回転させる場合、animationプロパティを使います。
animationプロパティに4つの引数を指定することで簡単に画像や要素を回転させるアニメーションを実装することが出来ます。

animation: アニメーション名 1回のアニメーション時間 イージング効果 アニメーションを繰り返す回数;

ここにそれぞれの値を指定することで様々なアニメーションを表現することが出来ます。

それでは画像や要素が回転する色んなCSアニメーションを見ていきましょう。

1回だけ回転させる方法

CSSアニメーションで1回だけ画像や要素を回転させる方法はこちら。

.item{
    animation: rotateAnimation 2s linear 1;
}

@keyframes rotateAnimation{
    from {
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

第1引数のrotateAnimationはアニメーション名。
その下の@keyframes rotateAnimation{ ... }のCSSアニメーションを指定しています。

第2引数の2sは1回のアニメーション時間。
2sなので1回のアニメーションは2秒で完了するように指定しています。

第3引数のlinearはイージング効果。
linearは緩急をつけず一定速度でアニメーションするように指定しています。

第4引数の1はアニメーションを繰り返す回数。
1なのでアニメーションは1回だけ実行されるように指定しています。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

回転を無限ループさせる方法

一定速度で回転させる

CSSアニメーションを使って一定速度で画像や要素を無限ループで回転させる方法はこちら。

.item{
    animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation{
    from {
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

この場合、第3引数のイージング効果を一定速度のlinear、第4引数にinfiniteを指定します。
アニメーション回数をinfiniteと指定することで無限ループさせることが出来ます。
それ以外は先ほどの例と同じです。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

緩急をつけて回転させる

緩急をつけて回転させる場合、animationプロパティのイージングを指定する第3引数のlinearを変更します。
そして第4引数はinfiniteを指定します。

こちらのサンプルではイージング効果をease-in-outにしています。

.item{
    animation: rotateAnimation 2s ease-in-out infinite;
}

@keyframes rotateAnimation{
    from {
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.