CodePen

HTML

            
              <div class="box"><img src="http://placekitten.com/g/300/300"></div>
<p>Click the cat to see some events!</p>
<pre class="display"></pre>
            
          
!

CSS

            
              body {background:#000; margin:3em; color:whitesmoke; font-family: Georgia, serif; perspective: 500px; }

p {text-align: center; margin-top:3em; font-weight:bold; font-style:italic; font-size: 120%;}

.display {
  border-top: 1px solid #666;
  width:80%;
   margin: 3em auto;
  padding:1em 4%;
}

.box {
  width:300px;
  height:300px;
  margin:auto;
 
}

img { border-radius: 50%;}

.active {
  animation: flip .7s ease-in-out 5 alternate both;
}

@keyframes flip {
    0% {transform: rotateY(-90deg);}
   30% {transform: rotateY(7deg);}
   60% {transform: rotateY(-7deg);}
  100% {transform: rotateY(0deg);}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
var myAnim =  document.querySelector('.box');
var disp = document.querySelector('.display');

myAnim.addEventListener('click', function(){
        myAnim.classList.add('active');
  });   

myAnim.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
myAnim.addEventListener('animationend', onAnimationEnd, false);

myAnim.addEventListener('webkitAnimationStart', onAnimationStart, false);
myAnim.addEventListener('animationstart', onAnimationStart, false);

myAnim.addEventListener('webkitAnimationIteration', onAnimationIteration, false);
myAnim.addEventListener('animationiteration', onAnimationIteration, false);


function onAnimationEnd(e) {
   myAnim.classList.remove('active');
  disp.textContent += "Aw, animation "+ e.animationName + " has ended :("+ "\n" ;
}

function onAnimationStart(e) {
  disp.textContent += "Yay! Animation "+ e.animationName + " started!!" + "\n" ;
}

function onAnimationIteration(e) {
  disp.textContent += "Oh, an iteration of "+ e.animationName + "," +e.elapsedTime+"s elapsed."+ "\n"  ;
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................