Effect on animation duration



effect on animation duration

if you want to do some effect on duration then first  you need to divide your
Element duration in percentage. Then give some effect like color , rotation ,skew,matrix.etc.

Example:-
Got to link below the you will see the live example of coddling below.


<html>
<head>
<title>csszilla</title>

<!--------------------csszilla--------------------->
<style>
.yellow {background-color:yellow; margin-top:100px;
                width:100px;s
                height:50px;
                display:block;
                position:relative;             
                animation-name:move;
                animation-duration:6s;
                animation-iteration-count:4;     
                 animation-iteration-count: infinite;
                 font-size:26px;
               
                }
               
               
                 @keyframes move {
                                0% { background-color:orange; left:0px; top:0px;}           
                                25% { background-color:green; left:100px; top:0px;}
                                50%  { background-color:#0000FF; left:100px; top:100px;}
                                75%  { background-color:#0000FF; left:0px; top:100px;}
                                100% { left:0px; top:0px; background-color:#993300;}
                 }
                 
                 
                 .green {background-color:green; margin-top:100px;
                width:100px;
                height:50px;
                display:block;
                position:relative;             
                animation-name:move;
                animation-duration:6s;
                animation-iteration-count:4;     
                 animation-iteration-count: infinite;
                 animation-direction: reverse;
                 animation-timing-function: ease;
                  font-size:26px;
                 
               
                }


</style>
</head>
<body>
<h2>css3 animation method</h2>
<div class="yellow">CSSZilla</div>
<div class="green">CSSZilla</div>
<div class="rotation"> helo</div>


</body>
</html>

Comments

Popular posts from this blog