CSSで三角関数を使う

いつも「将来使わないから学ぶ必要ない」と言われがちな三角関数がCSSで使えるようになった。

<div class="ball"></div>

.ball {
  animation: rotate 3s linear infinite;
  position: absolute;
}

@keyframes rotate {
  0% {
    top: calc(100px * sin(0deg));
    left: calc(100px * cos(0deg));
  }
  25% {
    top: calc(100px * sin(90deg));
    left: calc(100px * cos(90deg));
  }
  50% {
    top: calc(100px * sin(180deg));
    left: calc(100px * cos(180deg));
  }
  75% {
    top: calc(100px * sin(270deg));
    left: calc(100px * cos(270deg));
  }
  100% {
    top: calc(100px * sin(360deg));
    left: calc(100px * cos(360deg));
  }
}

デモ