I’ve been reading some articles about CSS3 animations for the past few days and I have used two animations so far. First is the rotate() function and the other one is the scale() function.

The first thing I do when creating a CSS animation is declare the keyframes

1
2

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

Keyframes for me are like functions. The name of the keyframe above is spin, which I used in my rotate() animation below.

1
2
3
4

-webkit-transform: rotate(-111deg);
-webkit-animation: spin 1s linear;
-webkit-animation-fill-mode:forwards;
-webkit-transform-origin:0% 100%;

Note: This animation only works for Chrome browsers.