CSSで回転アニメーションを実現する方法を現役デザイナーが解説【初心者向け】

CSSで回転アニメーションを実現する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。いくつかの方法を紹介していますので、それを参考にぜひ魅力的なサイト制作に役立ててください。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

様々な回転方法と設定

アニメーションでよく見かける回転の動きについていくつか紹介します。

 

円上に動かす

一番よく見かける回転アニメーションです。ローディング画面などでよく使われています。

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

要素を平面で360度回転させます。

 

X軸で回転させる

鉄棒でくるくる回る動きのような感じです。

@keyframes rotation{
  0%{ transform:rotateX(0);}
  100%{ transform:rotateX(360deg); }
}

X軸を基準に360度回転させます。

 

Y軸で回転させる

X軸で回転させるのY軸バージョンです。
ご想像通り、XをYに変えるだけです。

@keyframes rotation{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}

Y軸を基準に360度回転させます。

 

回転アニメーションのデモを見てみよう

上記の動きについて確認してみましょう！

HTML：

<span id="box1"></span>
<span id="box2"></span>
<span id="box3"></span>

CSS：

span{
  display:inline-block;
  width:100px;
  margin:50px;
  height:100px;
  margin:30px;
  background:gold;
}
#box1{
  animation:3s linear infinite rotation1;
}
#box2{
  animation:3s linear infinite rotation2;
}
#box3{
  animation:3s linear infinite rotation3;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotation2{
  0%{ transform:rotateX(0);}
  100%{ transform:rotateX(360deg); }
}
@keyframes rotation3{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}

 

 

[PR] Webデザインで副業する学習方法を動画で公開中

回転アニメーションを実装してみよう

上記の基本を応用して、回転させる要素の形や色、回転方向、回転の中心を変えて、CSSでさまざまな回転アニメーションを作ってみましょう。

HTML：

<span class="circle1"></span>
<span class="circle2"></span>
<span class="circle3"></span>
<span class="box1"></span>
<span class="box2"></span>
<span class="box3"></span>

CSS：

span{
  display:inline-block;
  width:100px;
  height:100px;
  margin:50px;
}
.circle1{
  border-radius:100%;
  box-sizing:border-box;
  border:10px dotted gold;
  animation:3s linear infinite rotation;

}
.circle2{
  width:70px;
  height:70px;
  border-radius:100%;
  background:limegreen;
  transform-origin:right center;
  animation:2s ease infinite alternate rotation;
}
.circle3{
  border-radius:50%;
  background:gold;
  animation:.5s ease-in-out infinite alternate rotationx;
}

.box1{
  background:orange;
  animation:3s ease-in-out infinite alternate rotation;
}
.box2{
  background:skyblue;
  position:relative;
  animation:3s ease-in-out infinite alternate rotationy, 3s linear infinite alternate movement;
}
.box3{
  border-left:3px solid gray;
  transform-origin:left top;
  animation:3s ease-in-out infinite rotation;
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
@keyframes rotationx{
  0%{ transform:rotateX(0);}
  50%{ background:tomato; }
  100%{ transform:rotateX(360deg); }
}
@keyframes rotationy{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}
@keyframes movement{
  0%{ left:-100px;}
  100%{ left:100px; }
}

 

 

監修してくれたメンター

メンター 橋本真理 フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。