Hover over the box ...

by c_vilander

HTML

<p>Hover over the box ...</p>

<div id="box"></div>

CSS

/* Simple demo, using the element.animate() function. Requires Chrome 36 Beta to work. */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #eee;
}  

p {
  font: lighter 24px "Helvetica Neue", sans-serif; 
  color: #222;
  letter-spacing: 2px;
}

#box {
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 75px;
  height: 75px;
  border-radius: 15px;
  border: 1px solid #222;  
}

JavaScript

(function () {
  
    var box = document.getElementById('box');

    box.onmouseover = function () {

        box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }

        ], {
            duration: 2000,
            iterations: 2
            
        });

    };

})();