意外と知られていないCSSの色々な回転アニメーションの作成方法

CSSアニメーションで右回転させる方法

よく使用されるCSSアニメーションで右回りの回転をさせるにはtransform: rotateで0degから360degを指定してanimationで動かす。

/*
<div class="star star1">★</div>
*/
.star {
  display: inline-block;
  font-size: 3em;
}

.star1 {
  animation: r1 1s linear infinite;
}

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

CSSアニメーションで左回転させる方法

逆回転の場合は360degを-360degにする。

.star2 {
  animation: r2 1s linear infinite;
}

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

CSSアニメーションで右・左回転を繰り返す方法

animationにalternateを追加する。

.star3 {
  animation: r3 1s linear infinite alternate;
}

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

秒針のように1秒で6度回転する方法

6度は360度 / 6 なのでanimationで60s steps(60)を指定する。

これは60s steps(60) => 1s steps(1) なので1秒で6度となる。

.star4 {
  animation: r4 60s steps(60) infinite;
}

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

秒針のように中央下を基点に回転する方法

秒針のように中央下を基点に動かすにはtransform-origin: center bottomを指定する。

.star5 {
  animation: r5 1s linear infinite;
  transform-origin: center bottom;
}

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

X軸を軸とする角度で回転する方法

transform: rotateXを指定する。

.star6 {
  animation: r6 1s linear infinite;
}

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

Y軸を軸とする角度で回転する方法

transform: rotateYを指定する。

.star7 {
  animation: r7 1s linear infinite;
}

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

X軸を軸とする角度で左上基点で回転

transform: rotateX, transform-origin: left topを指定する。

.star8 {
  animation: r8 1s linear infinite;
  transform-origin: left top;
}

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

Y軸を軸とする角度で左上基点で回転

transform: rotateY, transform-origin: left topを指定する。

.star9 {
  animation: r9 1s linear infinite;
  transform-origin: left top;
}

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

Y軸を軸として裏も見えるよう回転

表と裏の要素を用意してtransform-style: preserve-3d, backface-visibility: hiddenを指定する。

backface-visibilityはベンダープレフィックス(-webkit-)を付けないとChrome以外のブラウザだと正しく表示されないことが多いため注意。

.flip {
  width: 1em;
  height: 1em;
  margin-bottom: 1em;
  animation: flip 5s linear infinite;
  transform-style: preserve-3d;
  font-size: 5em;
}

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

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}
<div class="flip">
  <div class="front">🌕</div>
  <div class="back">🌑</div>
</div>
🌕
🌑

Y軸を軸として裏も見えるよう横移動しながら回転

前述のwidth: 1emを削除すればwidth: 100%になり、横移動が追加される。

.flip2 {
  height: 1em;
  margin-bottom: 1em;
  animation: flip 5s linear infinite;
  transform-style: preserve-3d;
  font-size: 5em;
}

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

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

🌕
🌑
カテゴリーcss