Utiliser les événements liés aux animations

by oscard

HTML

<h1 id="watchme">Regardez-moi bouger</h1>
<div class='led-block'>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
  <div class='led'></div>
</div>


<p>
  Voici les événements relatifs aux animations :
</p>
<ul id="output">
</ul>

SCSS

.led-block{
  display:flex;
}

.led {
  width : 12px;
  height:12px;
  margin:3px;
  border-radius:15px;
  box-shadow : 0px 0px 15px 6px rgba(255, 0, 24, 0.6);
  background: red;
  animation : blinkl 1.3s ease infinite;
}
.led:nth-child(2){
  animation-delay : 0.1s;
}

.led:nth-child(3){
  animation-delay : 0.2s;
}

.led:nth-child(4){
  animation-delay : 0.3s;
}

.led:nth-child(5){
  animation-delay : 0.4s;
}

.led:nth-child(6){
  animation-delay : 0.5s;
}

.led:nth-child(7){
  animation-delay : 0.6s;
}

.led:nth-child(8){
  animation-delay : 0.8s;
}


@keyframes blinkl {
  from {
    opacity: 1;
  }
  
  to {
    opacity : 0;
  }
}

JavaScript

/*var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";
function listener(event) {
  var l = document.createElement("li");
  switch(event.type) {
    case "animationstart":
      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}*/