How to pass css :active pseudo class to javascript?

Question

Reference: Comments posted by @AnkithAmtange

---

Given html

Click Away

css

div {
  width:          


        

Answer 1

You can utilize :active:hover pseudo class, animation with duration set to 0s, @keyframes at css; animationend event at javascript

:root {
  --activeprop: 0px;
}
div {
  position: relative;
  left: var(--activeprop);
  width: 200px;
  height: 200px;
  background: orange;
}
div:active:hover {
  color: white;
  background: rebeccapurple;
  animation: active 0s;
  -moz-animation: active 0s;
  -webkit-animation: active 0s;
}

@keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}

@-moz-keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}
@-webkit-keyframes active {
  from {
    left:var(--activeprop);
  }
  to {
    left:var(--activeprop);
  }
}

Click Away