Clockwise and anticlockwise spin in CSS keyframes

Feel like spinning an element? Using keyframes you can spin an element with this handy CSS animation, go clockwise/anticlockwise or mash it up and change those values to suit your project.

 

Check out this JSFiddle : http://jsfiddle.net/devools/zsjfuvxm/2/


Author: Anonymous
Added: Thursday, 20 Nov, 2014
Category: CSS
Tags: HTML

Code

-webkit-animation: antiClockwiseSpin 10s infinite linear;
animation: antiClockwiseSpin 10s infinite linear;


@keyframes antiClockwiseSpin {
	0%  {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}	
}

@keyframes antiClockwiseSpin {
	0%  {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}	
}


/* Prefixed using http://pleeease.io/play/ */

-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;


@-webkit-keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
    
}@keyframes clockwiseSpin {
	0%  {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}	
}

Comments