jpetto · December 27, 2015 12:29
diff --git a/animation-demo.html b/animation-demo.html
 <!doctype html>
 <html>
 <head>
  <title>CSS Animations - Percentages</title>

  <style type="text/css">
  #doit {
    display: block;
    margin: 0 auto;
  }

  #pulser {
    width: 100px;
    height: 100px;
    margin: 100px auto 0;
    border-radius: 50%;
    background: rgba(23, 44, 11, 0.6);
  }

  @-webkit-keyframes pulse {
    0% {
      /* these are repetetive, as they're the same as defined in #pulser above */
      width: 100px;
      height: 100px;
    }
    10% {
      width: 200px;
      height: 200px;
    }
    15% {
      width: 160px;
      height: 160px;
    }
    35% {
      width: 300px;
      height: 300px;
    }
    40% {
      width: 260px;
      height: 260px;
    }
    60% {
      width: 400px;
      height: 400px;
    }
    65% {
      width: 360px;
      height: 360px;
    }
    100% {
      width: 500px;
      height: 500px;
      background: rgba(154, 22, 1, 0.6);
    }
  }

  .expando {
    -webkit-animation:
      pulse   /* apply the pulse animation (defined above) */
      3s      /* the animation should take 3 seconds */
      ease    /* apply 'ease' easing */
      0s      /* delay of zero seconds */
      1       /* play the animation once */
      normal  /* play animation normally (forwards only) */
      forwards/* retain values of last keyframe when complete */
      ;
  }
  </style>
 </head>
 <body>

  <button id="doit">Animate!</button>

  <div id="pulser"></div>


 <script>
  var doit = document.querySelector('#doit');
  var pulser = document.querySelector('#pulser');

  doit.addEventListener('click', function() {
    pulser.setAttribute('class', 'expando');
  });
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>CSS Animations - Percentages</title>

	<style type="text/css">
	#doit {
	display: block;
	margin: 0 auto;
	}

	#pulser {
	width: 100px;
	height: 100px;
	margin: 100px auto 0;
	border-radius: 50%;
	background: rgba(23, 44, 11, 0.6);
	}

	@-webkit-keyframes pulse {
	0% {
	/* these are repetetive, as they're the same as defined in #pulser above */
	width: 100px;
	height: 100px;
	}
	10% {
	width: 200px;
	height: 200px;
	}
	15% {
	width: 160px;
	height: 160px;
	}
	35% {
	width: 300px;
	height: 300px;
	}
	40% {
	width: 260px;
	height: 260px;
	}
	60% {
	width: 400px;
	height: 400px;
	}
	65% {
	width: 360px;
	height: 360px;
	}
	100% {
	width: 500px;
	height: 500px;
	background: rgba(154, 22, 1, 0.6);
	}
	}

	.expando {
	-webkit-animation:
	pulse /* apply the pulse animation (defined above) */
	3s /* the animation should take 3 seconds */
	ease /* apply 'ease' easing */
	0s /* delay of zero seconds */
	1 /* play the animation once */
	normal /* play animation normally (forwards only) */
	forwards/* retain values of last keyframe when complete */
	;
	}
	</style>
	</head>
	<body>

	<button id="doit">Animate!</button>

	<div id="pulser"></div>


	<script>
	var doit = document.querySelector('#doit');
	var pulser = document.querySelector('#pulser');

	doit.addEventListener('click', function() {
	pulser.setAttribute('class', 'expando');
	});
	</script>
	</body>
	</html>