Simple CSS3 Hover Spin Animation

Making an image spin on hover previously would have been a job for jQuery but not any more.
CSS3 has some really nice animation effects of its own and most of the major browsers now support it. (All the current versions of each major browser support this. IE9, IE8, IE7, do not.)
If you visit a blog post of ours and hover over the little avatar image you will notice it spins!  A bit like this below: (hover your mouse over the image / or touch with a touch device)
The Code
.image {
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;}

.image:hover {
-o-transform:rotate(720deg); }

The duration of the spin is set to 2 seconds and the rotation is set at 720 degrees (fully around twice). These variables can obviously be changed to suit your requirements.

Written by Oli Yeates


Follow Oli on Twitter