How to fire "animationend" event, when I can't set a CSS animation?

Question

If I set the css animation to "element", it's fine. If the Css animation is not available, how does it function fire like a zero seconds animation in the ES5?

function run() { ... }

element.addEventListener('animationend', run);

---

Reply for

@Anurag Srivastava,

Am I wrong idea or do I have the following code wrong? Either way, the return value is "".

var el1 = document.getElementById("notAnimation");

console.log(el1.style.animation);

var el2 = document.getElementById("onAnimation");

console.log(el2.style.animation);

div {
  padding: 10px;
  margin: 20px;
}

#notAnimation {}

#onAnimation {
  animation: scale 10s ease-in-out;
}

@keyframes scale {
    0% {
      transform: scale(1);
      opacity: 1;
      color: black;
    }
    50% {
      transform: scale(0.95);
      opacity: .4;
      color: red;
    }
    100% {
      transform: scale(1);
      opacity: 1;
      color: black;
    }
}

<div id="notAnimation">
  Not Animation
</div>

<div id="onAnimation">
  Animation
</div>

Answer 1

You can check if element.style.WebkitAnimation and element.style.animation contain any value and execute run() if the value is ""

Edit Turns out that .style will return "" for any value. What you need is window.getComputedStyle() along with the property animationName. If it is none, there is no animation, else there is. Check the code below:

var el1 = document.getElementById("notAnimation");
console.log(window.getComputedStyle(el1)["animationName"])

var el2 = document.getElementById("onAnimation");
console.log(window.getComputedStyle(el2)["animationName"])

div {
  padding: 10px;
  margin: 20px;
}

#notAnimation {}

#onAnimation {
  animation: scale 10s ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 1;
    color: black;
  }
  50% {
    transform: scale(0.95);
    opacity: .4;
    color: red;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    color: black;
  }
}

<div id="notAnimation">
  Not Animation
</div>

<div id="onAnimation">
  Animation
</div>