Basic square anim environment

by ShaCP

HTML

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

CSS

#one {
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
  position: relative;
  animation: 1s linear forwards;
  margin-top: 100px;
}

body {
  margin: 0;
}

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

@keyframes move {
  to {
    transform: translate(300px);
    margin: 0;
  }
}

JavaScript

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