CSS ANIMATION

CSS animation property allow us to creatin animation effect for change in element's style.

Lets first see an example and then further understand its key features.

@keyframes my-animation{
    from { margin-left: 0;}
    to { margin-left: 90%;
        background-color: yellowgreen;
        }
}
.box{
    animation-name: my-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    height: 50px;
    width: 100px;
    background-color: #006699;
}

Output:

Building blocks of CSS animation

There are two building blocks of CSS animation:

1. @keyframes - It creates the platform for animation.



@keyframes animation-name{
    .
    .
    .
}

2. keyframes animation properties - Inside keyframes animation properties are specified. The animation properties are defined either in terms of to and from or in percentage form.



@keyframes animation-name{
    from { property1: value1;}
    to { property2: value2;}
}




@keyframes animation-name{
    0% { property1: value1;}
    50% { property2: value2;}
    100% { property2: value3;}
}

Steps to create animation

Step 1:- Create @keyframes inside style tag.

Step 2:- Name @keyframes to be used further. Example: @ketframes My_animation { ... }

Step 3: - Define CSS configuration inside keyframes for animation.

Step 4: - Mention animation-name with desired element you want animation for.
Example: div{ animation-name: My_animation;} .

Note: You must mention animation-duration property otherwise animation will not take place because a default value 0 is set to the animation-duration.

@keyframes my-animation{
    0% { margin-left: 0; background-color: #006699;}
    50% { margin-left: 90%; background-color: yellowgreen; border-radius: 50%;}
    100% { margin-left: 0; background-color: #006699;}
}
.box{
    animation-name: my-animation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    height: 50px;
    width: 100px;
    background-color: #006699;
}

Output:

CSS animation delay

The animation-delay property specifies the delay time for animation to start.

@keyframes my-animation{
    0% { margin-left: 0; background-color: #006699;}
    50% { margin-left: 90%; background-color: yellowgreen; border-radius: 50%;}
    100% { margin-left: 0; background-color: #006699;}
}
.box{
    animation-name: my-animation;
    animation-delay: 2s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    height: 50px;
    width: 100px;
    background-color: #006699;
}

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.