animation iteration

by amindunited

HTML

<button>
  Hey
</button>

CSS

button {
  background-color: #efefef;
  border-radius: 3px;
  padding: 10px;
}
button.flash {
  background-color: rgba(255, 255, 0, .5);
  
  animation: flash .01s ease 40;
}

/* animation */
@keyframes flash {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 1; }
}

JavaScript

var button = document.querySelector('button');
button.addEventListener('click', function () {
	button.classList.toggle('flash');
  //button.addEventListener('animationstart', function () {
  //	console.log('anim start');
  //});
  button.removeEventListener('animationiteration', iterationMethod);
  button.addEventListener('animationiteration', iterationMethod);
});

var iterationCount = 0;
function iterationMethod () {
  iterationCount++;
  button.style.height = (iterationCount*10)+"px";
}