WDS83 - Animate the CSS

In the last two articles, we learned about CSS transitions and created some pretty cool elements with transitions and transformations. Now in today's class, we are going to learn animations in CSS which creates animations without the use of javascript or flash.

CSS Animations

A CSS animation lets us change an element's style from one to another. We can change as many properties as we want. To use this CSS animations, we have to first specify some keyframe rules which include how and which properties are we changing.

The @keyframes Rule

When we specify CSS styles inside the @keyframes rule, the animations will gradually change from current style to new style at certain times. To get these working, we must bind animations to an element. Let's understand more by an example...

@keyframes myAnimation {
    from {background-color: blue;}
    to {background-color: red;}
}

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: myAnimation;
    animation-duration: 5s;
}

In the following example, we are binding "myAnimation" to

element. The animation will last for 5 seconds and will gradually change the background-color from blue to red.

It is important to specify a non zero value of animation-duration. If not specified it will take default value which is 0 seconds and we will not see any animation. In the above example, we have bonded the @keyframes my specifying name of animation in

.

Let's see another example in which we are telling what to do with percentages. That is color will change to red when animation will complete 25%, change to yellow when the animation is 50% and so on.

That's all for today. In the next article, we will dive dip in animations to see more ways to customize them.
Till then #keepCoding.