tests

by ShaCP

HTML

<div id="one">
  <span>Hello</span>
  </div>

CSS

#one {
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
  position: relative;
  animation: 3s linear forwards;
  margin-top: 100px;
  writing-mode: vertical-lr;
  text-orientation: upright;
  letter-spacing: -1px;
}

body {
  margin: 0;
}

#one.play {
  animation-name: move;
}

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

JavaScript

one.addEventListener("click", (e) => {
  e.target.classList.toggle("play");
  e.target.classList.remove("off");
})

one.addEventListener("animationend", (e) => e.target.classList.toggle("play"))

/* one.addEventListener("animationstart", (e) => {
  if (e.animationName === "move-text") {
    window.requestAnimationFrame(step);
  }
}) */