How To Use CSS Animation Direction Property With HTML

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

In CSS The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.So today we discuss how to do it.

How To Use CSS Animation Direction Property With HTML

Animation-direction property :

  • normal - The animation is played as normal (forwards). This is default
  • reverse - The animation is played in reverse direction (backwards)
  • alternate - The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards

Complete Code For Using CSS Animation Direction Property With HTML.
<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Animation Direction 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: red;
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-direction: reverse;
    }

    @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;}
    }
   .div2{
       width: 100px;
       height: 100px;
       background-color: red;
       position: relative;
       animation-name: example2;
       animation-duration: 4s;
       animation-iteration-count: 2;
       animation-direction: alternate;
   }
    @keyframes example2 {
        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;}
    }
    .div3{
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation-name: example3;
        animation-duration: 4s;
        animation-iteration-count: 2;
        animation-direction: alternate-reverse;
    }
    @keyframes example3 {
        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;}
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">CSS Animation Direction Property With HTML</h1>
    </div>
    <br>
    <div class="col-md-12">
        <div class="well">
           <div class="col-md-6">
               <div class="div1" ></div><br>
           </div>
            <div class="col-md-6">
                <div class="div2"></div><br>
            </div>
            <div class="col-md-6">
                <div class="div3"></div><br>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Related Post