How To Use CSS Animation Delay Property With HTML

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

In CSS The animation-delay property specifies a delay for the start of an animation.So today we discuss how to do it.

How To Use CSS Animation Delay Property With HTML

Using css you can delay the animation before it start.

<style>
    body {
        background: #ff944d;
    }
    .div1 {
        width: 100px;
        height: 100px;
        background-color: #b34700;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-delay: 2s;
        color: white;
    }

    @keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        25%  {background-color:yellow; left:200px; top:0px;}
        50%  {background-color:blue; left:200px; top:200px;}
        75%  {background-color:green; left:0px; top:200px;}
        100% {background-color:red; left:0px; top:0px;}
    }
    .well{
        height: 200px;
    }
</style>

Complete Code For Using CSS Animation Delay Property With HTML.

<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Animation Delay Property With HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
    body {
        background: #ff944d;
    }
    .div1 {
        width: 100px;
        height: 100px;
        background-color: #b34700;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-delay: 2s;
        color: white;
    }

    @keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        25%  {background-color:yellow; left:200px; top:0px;}
        50%  {background-color:blue; left:200px; top:200px;}
        75%  {background-color:green; left:0px; top:200px;}
        100% {background-color:red; left:0px; top:0px;}
    }
    .well{
        height: 200px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">CSS Animation Delay Property With HTML</h1>
    </div>
    <br>
    <div class="col-md-12">
        <div class="well">
           <div class="col-md-6">
               <div class="div1" id="div1"></div><br>
           </div>
        </div>
    </div>
</div>
</body>
</html>

Related Post