How to use keyframes delay in css

Posted under CSS3 Course On By mohammed.mutawe

keyframes delay

In the previous lesson, we learned to provide HTML tags with a specific number before starting to rotate, and we tried an example of that. In this lesson, we will learn how to delay the start of animation in HTML tags using CSS.

 

Definition

The animation delay function is simple and contains a value representing the number of seconds to delay the animation process, just as follows:

animation-delay:2s;

If we assume that we have two HTML tags and we want to delay the start of one of them, all we have to do is specify the number of seconds in one of them so that the second tag starts before it.

 

Features

There are some properties that the delay start animation has, which can be in:

  • Regulating the movement of tags in HTML if we have more than one tag for movement.
  • Organizing memory exploitation in the browser and cache memory.

 

Example

Please, to understand CSS animation delay well, copy the following codes and run it in your browser.

CSS

.first{
    width: 250px;
    height: 100px;

    background-color:#C0B7C7;
    margin:20px auto;
    margin-top:300px;
    position:absolute;
    color:#FBFBFC;

    -webkit-animation-name:moving;
    animation-name: moving; /*This is for keyframe which is contains moving feature*/
    animation-duration: 5s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count we set no stop*/
    animation-direction:alternate; /*you can choose <normal> or <reverse> or <alternate> <alternate reverse>*/

    animation-delay:2s;

    animation-fill-mode: forwards;   /*forwards or backwards*/

}

.second{
    width: 250px;
    height: 100px;

    background-color:#C0B7C7;
    margin:20px auto;
    margin-top:300px;
    position:absolute;
    color:#FBFBFC;
    -webkit-animation-name:moving;
    animation-name: moving; /*This is for keyframe which is contains moving feature*/
    animation-duration: 5s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count we set no stop*/
    animation-direction:alternate; /*you can choose <normal> or <reverse> or <alternate> <alternate reverse>*/
    animation-delay:4s;
    animation-fill-mode: forwards ;


}


/*Animation functions*/
@keyframes moving{
    0%{
        top:100px;
        left:400px;
    }

    25%{
        top:200px;
        left:100px;
    }

    50%{
        top:200px;
        left:100px;
    }

    75%{
        top:200px;
        left:100px;
    }

    0%{
        top:200px;
        left:200px;
        background-color:#83C6E7;
    }

}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS Animation Delay</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="first">First div</div>
        <div class="second">Second div</div>
    </body>

</html>