content prop animation

by ShaCP

HTML

<div id="one" tabindex="-1">
</div>
<!-- <div id="counter">
</div> -->

CSS

div {
  width: 200px;
  height: 200px;
  background-color: lightskyblue;
  animation-name: one;
  animation-fill-mode: forwards;
  animation-duration: 1.65s;
  /* animation-iteration-count: infinite; */
  animation-timing-function: linear;
  transform: none;
}

div:focus {
  animation-name: two;
  transform: translateY(100%);
}

div:focus::after {
  animation-name: two;
}

div::after {
  content: "Wait";
  animation-fill-mode: forwards;
  animation-duration: 1.65s;
  /* animation-delay: 1.65s; */
  animation-timing-function: steps(1, end);
  animation-name: one;
}

@keyframes one {
  100% {
    transform: translateY(100%);
    content: "Click me and I should animate up and right. I'm doing it currently but how to do it without transform: translateY(100%) in div:focus? (remove it to see what happens).";
  }
}

@keyframes two {
  100% {
    transform: translateX(100%);
    content: "Unfocus me and I should animate back to the top left corner and stay there";
  }
}

JavaScript

/* 
function count() {

  do {

  } while ((Date.now() - start) % 1000 !== 0);
setTimeout(() => {document.body.innerHTML = `${i++} seconds`}); 
    setTimeout(count); // schedule the new call (**)
}
 */