Pulsing Box

Basically a copy of http://www.webkit.org/blog-files/pulse.html with -moz-* stuff added to it along the -webkit-* stuff :)

HTML

<body>
    <h1>An example of a pulsing box</h1>

    
    <div class="pulsedbox">
      <p>
        
        OLOLOLOLO
      </p>
    </div>
    
  </body>

CSS

@-moz-keyframes pulse {
       0% {
         background-color: red;
         opacity: 1.0;
         -moz-transform: scale(1.0) rotate(0deg);
       }
       33% {
         background-color: blue;
         opacity: 0.75;
         -moz-transform: scale(1.1) rotate(-5deg);
       }
       67% {
         background-color: green;
         opacity: 0.5;
         -moz-transform: scale(1.1) rotate(5deg);
       }
       100% {
         background-color: red;
         opacity: 1.0;
         -moz-transform: scale(1.0) rotate(0deg);
       }
      }
      
      @-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 {
       -moz-animation-name: pulse;
       -moz-animation-duration: 4s;
       -moz-animation-iteration-count: infinite;
       -moz-animation-timing-function: ease-in-out;
       
       -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;
      }

JavaScript

// basically a copy of:
// http://www.webkit.org/blog-files/pulse.html
// with -moz-* stuff added to it along the -webkit-* stuff :)