Animation Html Code :
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes Animation1
{
0%{left:10px; top:10px;}
25%{left:380px; top:10px;}
50%{left:330px; top:230px;}
75%{left:10px; top:230px;}
100%{left:10px; top:10px;}
}
@keyframes Animation2
{
0%{left:800px; top:30px;}
25%{left:1000px; top:30px;}
50%{left:1000px; top:230px;}
75%{left:800px; top:230px;}
100%{left:800px; top:30px;}
}
#img1
{
width:70px;
height:70px;
position:relative;
left:300px;
top:20px;
animation-name:Animation1;
animation-duration:10s;
animation-delay:2s;
animation-iteration-count: 5;
}
#img2
{
width:70px;
height:70px;
position:relative;
left:800px;
top:20px;
animation-name:Animation2;
animation-duration:10s;
animation-delay:2s;
animation-iteration-count: 5;
}
#div1
{
border:0px solid blue;
border-radius:10px;
position:relative;
left:460px;
bottom:50px;
height:400px;
width:400px;
}
h1
{
color:lightblue;
font-family:tahoma;
}
</style>
</head>
<body bgcolor="black">
</hr>
<img id="img1" src="diwali.png" width="100" height="100"/>
<img id="img2" src="diwali.png" width="100" height="100"/>
<div id="div1">
<img src="happy diwali2.gif" width="400" height="400"/>
</div>
<br><br>
<h1><marquee> this Animation created by sreenu</marquee></h1>
</body>
</html>
