Play then reverse second animation (rotate + translate)

by ShaCP

HTML

<div id="one" class="anim-zero" tabindex="-1">
</div>
<p>
some text
</p>
<!-- <div id="counter">
</div> -->

CSS

body {
  height: 100vh;
}

div {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  animation-fill-mode: forwards;
  animation-duration: 1.65s;
  animation-timing-function: linear;
  margin-left: 10%;
}

#one.anim-zero {
  animation-name: zero;
}


#one.anim-one {
  animation-name: one;
}

#one.animZeroEndPosition {
 transform: translateY(100%) rotate(180deg);
}

#one.animOneEndPosition {
 transform: translateX(100%) translateY(100%);
}

#one.pointerEventsOff {
  pointer-events: none;
}


@keyframes zero {
  0% {
    transform: none;
  }
  
  100% {
    transform: translateY(100%) rotate(180deg);
  }
}

@keyframes one {
  0% {
    transform: translateY(100%);
  }
  
  100% {
    transform: translateY(100%) translateX(100%);
  }
}

#one.reverseAnim {
  animation-direction: reverse;
}

p {
  margin-top: 50%;
}

JavaScript

const toggleAnim = (name) => {
  debugger;
  one.classList.toggle(name)
}

const toggleAnimOneEndPosition = (e) => {
  if (e.animationName === "one") {
    one.classList.toggle("animOneEndPosition");
  } else if (e.animationName === "zero") {
    one.classList.toggle("animZeroEndPosition");
  }
}

const toggleReverseAnim = () => {
  one.classList.toggle("reverseAnim");
}

const togglePointerEvents = () => {
  one.classList.toggle("pointerEventsOff");
}

const preventDefault = (e) => {
  e.preventDefault();
}

const animationStart = (e) => {
  if (e.animationName === "one") {
    /* togglePointerEvents() */
    one.removeEventListener("blur", toggleAnimOne);
    one.removeEventListener("focus", toggleAnimOne);
  }
}

const animationEnd = (e) => {
  /* togglePointerEvents() */
  ;
  if (e.animationName === "one") {
    toggleAnim("anim-one");
    toggleAnimOneEndPosition(e);
    toggleReverseAnim();
  } else {
    if (e.animationName === "zero") {
      toggleAnim("anim-zero");
      toggleAnimOneEndPosition(e);
    }
  }
  one.addEventListener("blur", toggleAnimOne);
  one.addEventListener("focus", toggleAnimOne);
}

const toggleAnimOne = () => {
  toggleAnim("anim-one")
}

one.addEventListener("animationend", animationEnd)
one.addEventListener("animationstart", animationStart)


/* window.removeEventListener("blur", preventDefault); */