What is CSS3 Animation?

CSS3 animations also known as keyframes animation. CSS3 animations make it possible to animate almost every css property. With the help of css3 animation it is possible to creaty fency animation without using javascript & flash.

Concept of Animation

CSS3 animations are made up of two basic building blocks- Keyframes Rule & Animation Properties. @keyframes gradually change from the current style to the new style at certain times according animation properties.

In the above example we implemented a simple css3 animation. To acheive this animation we created a @keyframes rules named fadeInTop & we used this name in animation-name property. In animation-duration we defined the duration of animation & to make repeatable animation we used animation-iteration-count.

@keyframes rules

@keyfraes rule gradually change the style according to animation-duration. This is the place where anyone can show his efficiency to make beautiful or complex animation.