CSSでいろんなまわし方をしてみた

今日は意外と知られていませんが、CSSで回転するアニメーションをつくってみました！

まずはデモから。

See the Pen CSSで回転 by sayuri (@giraffeweb) on CodePen.light

CSSだけでいろんな回転の仕方ができますね！
すごい✨

では早速それぞれのソースから！

左回転

<div class="left spin">
  <i class="fab fa-bandcamp"></i>
</div>

.left {
  i {animation: s1 1s linear infinite}
}
@keyframes s1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

右回転

<div class="right spin">
  <i class="fab fa-bandcamp"></i>
</div>

.right {
  i {animation: s2 1s linear infinite}
}
@keyframes s2 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

1秒ごとに少しずつ回転

<div class="second spin">
  <i class="fab fa-bandcamp"></i>
</div>

.second {
  i {animation: s3 60s steps(60) infinite;}
}
@keyframes s3 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

円を描いて回転

<div class="circle spin">
  <i class="fab fa-bandcamp"></i>
</div>

.circle {
  i {
    animation: s4 1s linear infinite;
    transform-origin: center bottom;}
}
@keyframes s4 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

縦に回転

<div class="tall spin">
  <i class="fab fa-bandcamp"></i>
</div>

.tall {
  i {
    animation: s5 1s linear infinite;}
}
@keyframes s5 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
Share: