Событие CSS transitions

На конец CSS-анимации transitions можно повесить обработчик на событие transitionend.

Это широко используется, чтобы после анимации сделать какое-то действие или объединить несколько анимаций в одну.

Объект события transitionend содержит специфические свойства:

propertyName: Свойство, анимация которого завершилась
elapsedTime: Время (в секундах), которое заняла анимация, без учета transition-delay.

Свойство propertyName может быть полезно при одновременной анимации нескольких свойств. Каждое свойство даст своё событие, и можно решить, что с ним делать дальше.

Совместимость с браузерами


Да	10,0	16,0	3,1	12,1

Пример

<style>
#boat {
  margin-left: 0;  cursor: pointer;
  -webkit-transition: margin-left 3s ease-in-out; 
  transition: margin-left 3s ease-in-out; 
}

.back {  /* переворот картинки через CSS */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: fliph;   /* IE9- */
}
</style>
 <img src="images/boat.png" id="boat">
<p id="demo" style="margin-top: 20px">Нажмите на кораблик, чтобы начать анимацию </p>
<script>
var i=0;
var demo = document.getElementById('demo');
var boat = document.getElementById('boat');
var t = 1;

boat.onclick = function() { this.onclick = null; go();}// только первый клик сработает

boat.addEventListener('transitionend', function(e) {
  if (t++ == 6) t = 2;  
  demo.innerHTML =  (++i) + ". propertyName = " + e.propertyName +
      "; elapsedTime = " + e.elapsedTime.toFixed(2) + ' секунд';
  go();
 });

function go() {
  if (t % 2)
    { boat.className='';
      boat.style.marginLeft = 100 * t + 200 + 'px';
    } else 
       { boat.className = 'back';
         boat.style.marginLeft = 100 * t - 200 + 'px';
       }
  }

</script>