ignacioricci/gist:57f38f5111b27f77dec4

## gistfile1.txt
<html>
  <head>
    <title>Test Animations</title>
    <style type="text/css">

      body {padding:50px;}

      #login {
        width:200px;
        height:200px;
        background:#DDD;
        transition:all;
        animation:move1 1s;
      }

      #login.move2 {
        animation:move2 3s;
      }

      #login.move3 {
        animation:move3 1s;
      }

      @keyframes move1 {
        0%, 100% {transform:translate3d(0, 0, 0);}
        50% {transform:translate3d(100px, 0, 0);}
      }

      @keyframes move2 {
        0%, 100% {transform:translate3d(0, 0, 0); background:red;}
        50% {transform:translate3d(200px, 200px, 0);}
      }

      @keyframes move3 {
        0%, 100% {transform:translate3d(0, 0, 0); background:#DDD;}
        50% {transform:translate3d(300px, 0, 0); background:blue;}
      }

    </style>
  </head>
  <body>

    <div id="login"></div>

    <script type="text/javascript">

      /* From Modernizr */
      function whichAnimationEvent(){
          var t;
          var el = document.createElement('fakeelement');
          var animations = {
            'animation':'animationend',
            'OAnimation':'oAnimationEnd',
            'MozAnimation':'animationend',
            'WebkitAnimation':'webkitAnimationEnd'
          }

          for(t in animations){
              if( el.style[t] !== undefined ){
                  return animations[t];
              }
          }
      }

      function hasClass(el, cls) {
        return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
      }

      /* Listen for a animation */
      var animationEnd = whichAnimationEvent();
      var e = document.getElementById('login');

      animationEnd && e.addEventListener(animationEnd, function() {
      	e.classList.add('move2');
        if (hasClass(e, 'move2')) {
          animationEnd && e.addEventListener(animationEnd, function() {
            e.classList.add('move3');
          });
        }
      });


    </script>

  </body>
</html>
	<html>
	<head>
	<title>Test Animations</title>
	<style type="text/css">

	body {padding:50px;}

	#login {
	width:200px;
	height:200px;
	background:#DDD;
	transition:all;
	animation:move1 1s;
	}

	#login.move2 {
	animation:move2 3s;
	}

	#login.move3 {
	animation:move3 1s;
	}

	@keyframes move1 {
	0%, 100% {transform:translate3d(0, 0, 0);}
	50% {transform:translate3d(100px, 0, 0);}
	}

	@keyframes move2 {
	0%, 100% {transform:translate3d(0, 0, 0); background:red;}
	50% {transform:translate3d(200px, 200px, 0);}
	}

	@keyframes move3 {
	0%, 100% {transform:translate3d(0, 0, 0); background:#DDD;}
	50% {transform:translate3d(300px, 0, 0); background:blue;}
	}

	</style>
	</head>
	<body>

	<div id="login"></div>

	<script type="text/javascript">

	/* From Modernizr */
	function whichAnimationEvent(){
	var t;
	var el = document.createElement('fakeelement');
	var animations = {
	'animation':'animationend',
	'OAnimation':'oAnimationEnd',
	'MozAnimation':'animationend',
	'WebkitAnimation':'webkitAnimationEnd'
	}

	for(t in animations){
	if( el.style[t] !== undefined ){
	return animations[t];
	}
	}
	}

	function hasClass(el, cls) {
	return el.className && new RegExp("(\\s\|^)" + cls + "(\\s\|$)").test(el.className);
	}

	/* Listen for a animation */
	var animationEnd = whichAnimationEvent();
	var e = document.getElementById('login');

	animationEnd && e.addEventListener(animationEnd, function() {
	e.classList.add('move2');
	if (hasClass(e, 'move2')) {
	animationEnd && e.addEventListener(animationEnd, function() {
	e.classList.add('move3');
	});
	}
	});


	</script>

	</body>
	</html>