Hello Friends My Name Is Viraj,Today I Will Create Animated Effect On Your Web Page.
Here In This Html Tutorial We Will Create Animated Effect In Html/Css/Javascript Code.
Here In This Blog We Will Create Animated g Effect In Html/Css/Javascript Code.
Here Is An Example Related To Topic..............
Step 1 :
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
Position:relative;
/*Chrome,safari,opera*/
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/*standard syntax*/
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
/*chrome,safari,opera*/
@-webkit-keyframes myfirst{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:0px;top:200px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:200px;top:0px;}
100%{background:red;left:0px;top:0px;}
}
/*Standard syntax*/
@ keyframes myfirst{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:0px;top:200px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:200px;top:0px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
</body>
<p><b>Note:</b>This example does not w+ork in Internet Explorer9 and earlier versions.</p>
<div></div>
</body>
</html>
Output :
Here In This Html Tutorial We Will Create Animated Effect In Html/Css/Javascript Code.
Here In This Blog We Will Create Animated g Effect In Html/Css/Javascript Code.
Here Is An Example Related To Topic..............
Step 1 :
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
Position:relative;
/*Chrome,safari,opera*/
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/*standard syntax*/
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
/*chrome,safari,opera*/
@-webkit-keyframes myfirst{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:0px;top:200px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:200px;top:0px;}
100%{background:red;left:0px;top:0px;}
}
/*Standard syntax*/
@ keyframes myfirst{
0%{background:red;left:0px;top:0px;}
25%{background:yellow;left:0px;top:200px;}
50%{background:blue;left:200px;top:200px;}
75%{background:green;left:200px;top:0px;}
100%{background:red;left:0px;top:0px;}
}
</style>
</head>
</body>
<p><b>Note:</b>This example does not w+ork in Internet Explorer9 and earlier versions.</p>
<div></div>
</body>
</html>
Output :
No comments:
Post a Comment