Step by Step CSS3 Animation for beginners

css3animation

CSS3 has been introducted recently with the aim to phase out flash. Older browsers do not support CSS3 so make sure to have the latest version of whatever browser you prefer using. I will be using Chrome for this tutorial so we will need the google webkit. Even if you will not use Chrome, it is still suggested that you keep the webkit to make sure that users visiting your site with Chrome can view the CSS3 animation properly.

The most basic and important rule we need to know is called the @keyframes where we specify the animation we would like to have from beginning to end.

When using the @keyframes we can specify at what time we want the animation to take place. We can use from{} and to {} or percentage values such as 0%{}, 50%{}, 100%{} etc.

Lets create some simple examples….  Continue reading