ANIMATION
ANIMATION : Animation is a method in which image and picture manipulated and moving images.
we use a animation word and give a animation name and time period we can see in code animation is
most important role play in website /web application like popup images and moving images/content
we can say a animation
we
can customize image height/width and direction and animation time. if
we want a continue a animation we have a use infinite word in css
it is a
advance animation code :
<html>
<head>
<style>
body{overflow-x:hidden; background-image: url("2.jpg");}
#box{width:100px; height:350px; background:black; padding:20px; }
.box2{width:15px; height:350px; background:black; padding:10px; margin-left:50px; }
.circle{width:100px; height:100px; border-radius:50%;background:red; float:left; margin:3px; animation:4s red infinite;}
.circle2{width:100px; height:100px; border-radius:50%;background:yellow; float:left;margin:3px; animation:4s yellow infinite;}
.circle3{width:100px; height:100px; border-radius:50%;background:green; float:left;margin:3px; animation:2s green infinite;}
/*
#box:hover{background:black; transition:2s; transform:scale(.2);
transform:rotate(360deg) ; transform:skewY(60deg);
*/
@keyframes red{
0%{background:red;}
100%{background:black;}
}
@keyframes yellow{
0%{background:black;}
50%{background:yellow;}
100%{background:black;}
}
@keyframes green{
0%{background:black;}
100%{background:green;}
}
.img{position:absolute; top:500px; left:-500px; animation: car 5s infinite;}
@keyframes car{
0%{left:-500px;}
50%{left:200px;}
90%{left:200px;}
95%{left:100px;}
100%{left:1500px;}
}
.imgs{position:absolute; top:500px; right:-500px; animation: bike 5s infinite;}
@keyframes bike{
0%{right:-500px;}
50%{right:200px;}
90%{right:200px;}
95%{right:100px;}
100%{right:1500px;}
}
</style>
</head>
<body>
<!-- <div id="box">
<div class="circle"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
<div class="box2"></div> -->
<img src="2.png" width="520px" class="img">
<img src="3.png" width="520px" class="imgs">
</body>
</html>
please try this code and share this blog and comment
best institute for
web developing and
graphic design please
https://delhikacoder.blogspot.com/
Comments