CSS — multiple css animation , detect the end of animation of last element

animation: 
  loading 2s linear 0.5s forwards,
  completed 2s linear 2.5s forwards; 
//duration 2s
//loading delay 0.5s + duration 2s  = completed delay

multiple css transform

li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
}

#detect keyframes name , animation name

vanila javascript doesn’t support the property ‘animationName’!

//jQuery
$('.parent').on(animationEvent, function(e){
  console.log('detecting!', e.originalEvent.animationName)
  var animationName = e.originalEvent.animationName;
  if (animationName === 'complete') {
     console.log(animationName,'animation has finished');
  }
})

it detects all animation even inside of A element.

@keyframes complete 
  to 
    transform: translate3d(100%, 0, 0)
 
@keyframes start
  to 
    transform: translate3d(0, 100%, 0)
//console.log below. 
detecting! start
detecting! complete
complete animation has finished

#reference links :

Callbacks for CSS animations

http://jsfiddle.net/blossom/yrqocbdj/