realLifeinfo

CSS animation explained in details

Nerd, Solutions 

What is CSS animation? you might ask. The simple answer is CSS animation is the answer for web developers for creating native and pure animations based on CSS without relying on JavaScript.

Sponsored

As normal animations, CSS animations are controlled or defined using set of keyframes that define the behavior of entire animation.

CSS animations are controlled by eight properties, which are:

Eight properties that control CSS animation

CSS animation shorthand syntax

All these properties can be introduced into a CSS selector via a CSS animation shorthand syntax, which uses the keyword animation followed by all the above mentioned animation properties in a specific order.

Animation shorthand needs to be in this order. Example:

How to define CSS animation keyframes

Animation keyframe is a block of code that is used to control the animation. The anatomy of keyframe is the @ symbol followed by the word keyframes and then followed by the name that will be used to referrer to the keyframe later in the animation-name property.

Syntax:

@keyframes my_anime{

}

There are two types of CSS animation keyframes. The one that uses from and to keywords to control animation properties, and the other that uses percentage.

The percentage keyframe is more flexible than the one that uses from and to keywords. In percentage keyframe we can define custom stopping points by defining our own percentages points, which is not possible in from and to syntax.

Example:

@keyframes my_anime{

Sponsored

     from{}

     to{}

}

@keyframes my_anime{

     0%{}

      50%{}

     100%{}

}

CSS animation in action

In this example we are going to create an animation that change the width of the div and its background color.

//keyframes definition

@keyframes my_animation{

     from{

        width:200px;

        background: blue;

    }

    to{

        width: 500px;

Sponsored

        background: purple;

    }

}

//usage of animation keyframe

#div{

      background: blue;

      width: 200px;

      height: 200px;

      animation: my_animation 3s ease-in infinite alternate both;

}

In this example we use the shorthand syntax of CSS animation.

Note: something to note about CSS animation is when you want to use multiple animation on the same element you can't use the shorthand syntax.

You need to use the full properties syntax and separate any property value with comma, if animation don't share the same property value.

Example:

#div{

    animation-name: my_anime1, my_anime2;

    animation-duration: 2s, 3s;

    animation-timing-function: ease-in;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-fill-mode: both;

}

Here we define two animations my_anime1 and my_anime2. These animations share the same timing function, iteration-count, animation-direction, and animation-fill-mode, but if you look closely you can see we have provided a comma separated list for animation duration. This is because each animation has its own animation duration.

Read about CSS transform here

Read about CSS transition here

Sponsored