CSS Animations

The animation is a method by which images look in running or moving state. In the web, development animation creates interactive webpages. But before CSS animation, it’s done by flash. That looks cool but it’s very heavy or takes more bandwidth or consumes data. After html5 we have a lot of lightweight options like canvas, SVG, and CSS animation.

But before going further we should know the concept of a keyframe. Basically, a keyframe is those points that ley between the starting and ending of a smooth transition.

<!DOCTYPE html>
<html lang="en">
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: changecolor 5s infinite;

    @keyframes changecolor {
        0% { background-color: red; }
        100% { background-color: blue; }

In this example animation property play a fantastic role. It has a keyframe name, duration, iteration count. @keyframes trigger keyframe and you will see smooth transition 0 to 100.

Animation Shorthand Property

animation: name duration timing-function delay iteration-count direction;

About the Author: Pankaj Bisht