css animation restart reflow

by Stalk

HTML

<span id="review-text">тут текст</span> 
<br>
<img src="http://lorempixel.com/100/67/sports" alt="текст1">
<img src="http://lorempixel.com/100/67/food" alt="текст2">
<img src="http://lorempixel.com/100/67/cats" alt="текст3">
<img src="http://lorempixel.com/100/67/city">

CSS

.run-animation {
  animation: my-animation 2s both;
}
@keyframes my-animation {
  0% { opacity:0; }
  100% { opacity:1; }
}

JavaScript

var text = document.querySelector('#review-text')
var myClickHandler = evt => {
  text.innerHTML = evt.target.getAttribute('alt') || 'text not found'
  text.classList.remove("run-animation");
  void text.offsetWidth; // reflow hack
  text.classList.add("run-animation");
}
var images = [].slice.call(document.querySelectorAll('img'))
images.forEach(img=>img.addEventListener('click', myClickHandler))