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
Post a Comment