<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Pulsing Box example</title>
    <style type="text/css" media="screen">
      @-webkit-keyframes pulse {
       0% {
         background-color: red;
         opacity: 1.0;
         -webkit-transform: scale(1.0) rotate(0deg);
       }
       33% {
         background-color: blue;
         opacity: 0.75;
         -webkit-transform: scale(1.1) rotate(-5deg);
       }
       67% {
         background-color: green;
         opacity: 0.5;
         -webkit-transform: scale(1.1) rotate(5deg);
       }
       100% {
         background-color: red;
         opacity: 1.0;
         -webkit-transform: scale(1.0) rotate(0deg);
       }
      }

      .pulsedbox {
       -webkit-animation-name: pulse;
       -webkit-animation-duration: 4s;
       -webkit-animation-iteration-count: infinite;
       -webkit-animation-timing-function: ease-in-out;
      }
      
      div {
        background-color: red;
        width: 40%;
        padding: 0.2em 1em;
        margin: 6em;
      }
      
    </style>
  </head>
  <body>
    <h1>An example of a pulsing box</h1>
    
    <div class="pulsedbox">
      <p>
        This paragraph should pulse. Pulsing is the new blink.
        You heard it here first.
      </p>
    </div>
    
  </body>
</html>