お問合せ
MENU

【初心者向け】CSSアニメーションで回転を簡単に実装する方法

コードのこと

例えば英語がくるくる回っているとそれだけでおしゃれですよね…！

今回は、CSSを使って簡単に回転アニメーションを実装する方法を紹介します。
回転アニメーションと聞くと難しそうに感じるかもしれませんが、実はとってもシンプルなんです。この記事では実務でよく使う回転アニメーションをご紹介します！

回り続けるCSSアニメーション

まずは、回転アニメーションの基本から見ていきましょう。CSSアニメーションは、@keyframesというルールを使って定義します。@keyframesを使うと、どのようにアニメーションさせるかを細かく設定できます。

HTML

<img src="https://nakaemon.net/demo/img/kurukuru.png" class="rotate">

CSS

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

.rotate {
  animation: rotate 12s infinite linear;
}

このコードでは、@keyframes rotateで、0度から360度まで回転させるアニメーションを定義しています。そして、.rotateクラスに対して、このアニメーションを12秒かけて無限に、一定の速度で繰り返すように設定しています。

animationのショートハンド

上のCSSはanimationの指定をまとめて書くショートハンドで書かれています。
.rotate {
animation: rotate 12s infinite linear;
}

書く順番

animation:(animation-name) (animation-duration) (animation-timing-function)(animation-delay) (animation-iteration-count) (animation-direction) (animation-fill-mode);
  • animation-name : アニメーション名
  • animation-duration : アニメーションの時間
  • animation-timing-function : 動きの速度の指定
  • animation-delay : 開始を遅らせる時間
  • animation-iteration-count : 繰り返しの指定
  • animation-direction : アニメの再生方向の指定
  • animation-fill-mode : アニメ終了後の状態の指定

ショートハンドは全て書かなくてもOKです！
今回は回転するCSSの説明なので割愛しますが、animationの知識が着くと表現の幅が広がるので調べてみるとおもしろいですよ！

回転アニメーションの中に動かない文字を置く

くるくる回るよ
どこまでも

HTML

<div class="rotate__cont">
    <img src="https://nakaemon.net/demo/img/kurukuru.png" class="rotate__float">
    <p class="rotate__inner-txt">くるくる回るよ<br>どこまでも</p>
</div>

CSS

.rotate__cont{
    position: relative;
    width: 250px;
    height: 250px;
    margin:0 auto 30px;
}
.rotate__inner-txt{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 17px;
    text-align: center;
    z-index: 1;/* 読み上げ機能などに反応するように円より上に配置するため */
}
.rotate__float{
    animation: rotate 12s infinite linear;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

ポイントは回転する円と文字を囲う要素をposition:relative;にし、円と文字はposition:absolute;にすることです。

ホバーすると回転するCSSアニメーション

ホバーしたら
回転するよ

HTML

<div class="rotate__link">
    <img src="https://nakaemon.net/demo/img/kurukuru.png" class="rotate__hover">
    <p class="rotate__inner-txt">ホバーしたら<br>回転するよ</p>
</div>

CSS

.rotate__link{
    position: relative;
    width: 250px;
    height: 250px;
    margin:0 auto 30px;
    cursor: pointer;
}
.rotate__link:hover .rotate__hover{
    transform: rotate(90deg);
    transition-duration: 1s;
}
.rotate__hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition-duration: 1s;
}

ホバーして回転するアニメーションはanimationではなくtransition-durationとtransform:rotate(○○deg)を使って、ホバーした時の変化と秒数を指定すると良いですよ！

3Dで回転するCSSアニメーション

3Dで奥行きのある回転を実装することも可能です。
以下が3D回転のHTMLとCSSの書き方です。

HTML

<img src="https://nakaemon.net/demo/img/kurukuru.png" class="rotate3d">

CSS

@keyframes rotate3d {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

.rotate3d {
  animation: rotate3d 12s infinite linear;
}

CSSの回転アニメーションまとめ

この記事のポイントをまとめます。

  • @keyframesで回転アニメーションを定義し、animationプロパティで適用する。
  • animationのショートハンドを使って、複数のプロパティをまとめて設定できる。
  • 回転アニメーションの中に固定文字を配置するには、要素をposition: absoluteで配置し、中央に固定文字を置くと良い。
  • ホバーで回転アニメーションを実装するには:hoverを使って、要素にマウスを重ねたときに回転させるアニメーションを作成する。
  • 3D回転アニメーションはrotateX、rotateY、rotateZを使って3D回転アニメーションを実現する。

この記事がCSSの回転アニメーションの理解に少しでも貢献できると嬉しいです。

ブログ一覧へ