Walk routine

by eanders

HTML

<div id='test' class='walk'>aaabbbaaa</div>

CSS

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

@-webkit-keyframes rotating {
   20% { -webkit-transform: rotate(3deg); }
	40% { -webkit-transform: rotate(0deg); }
	60% { -webkit-transform: rotate(5deg); }
	80% { -webkit-transform: rotate(-5deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotating {
	20% { -moz-transform: rotate(3deg); }
	40% { -moz-transform: rotate(0deg); }
	60% { -moz-transform: rotate(5deg); }
	80% { -moz-transform: rotate(-5deg); }
	100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes rotating {
	20% { -o-transform: rotate(3deg); }
	40% { -o-transform: rotate(0deg); }
	60% { -o-transform: rotate(5deg); }
	80% { -o-transform: rotate(-5deg); }
	100% { -o-transform: rotate(0deg); }
}

@keyframes rotating {
	20% { transform: rotate(3deg); }
	40% { transform: rotate(0deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

.walk {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
	animation: rotating 1s linear infinite;
}