<!----------------------------------------------
Author: Qaidjohar
Creation Date: 13/09/16
Logical Comment: Animation Using CSS - HTML file
----------------------------------------------->
<html>
<head>
<title>Animation using CSS</title>
<link rel="stylesheet" type="text/css" href="html_animation_post.css">
</head>
<body>
<!-------------------main div---------------------------->
<div class="main">
<!-------------------header div---------------------------->
<div class="header">
<h1>Animation in HTML using CSS</h1>
</div>
<!-------------------container div---------------------------->
<div class="container">
<div class="go">
<svg height="100%" width="100%">
<rect height="100px" width="10px" x="55" y="250" fill="black"/>
<polygon points="20,210 30,200 100,200 110,210 110,240 100,250 30,250 20,240" fill="white" stroke="black" stroke-width="2px"/>
<polygon points="30,220 80,220 80,210 100,225 80,240 80,230 30,230" fill="red"/>
</svg>
</div>
<div class="ball">
<svg height="120px" width="120px">
<circle cx="60" cy="60" r="58px" fill="yellow" stroke="darkorange" stroke-width="3px"/>
<circle cx="80" cy="40" r="12px" fill="black"/>
<ellipse rx="4px" ry="5px" cx="85" cy="40" fill="grey"/>
<ellipse rx="30px" ry="8px" cx="80" cy="90" fill="pink" stroke="darkorange" stroke-width="2px"/>
</svg>
</div>
<div class="road">
<svg height="50px" width="100%">
<rect height="40px" width="127px" x="13" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="150" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="300" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="450" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="600" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="750" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
<rect height="40px" width="140px" x="900" y="0" fill="brown" stroke="darkred" stroke-width="3px"/>
</svg>
</div>
</div>
<!-------------------footer div---------------------------->
<div class="footer">
<h3>(: Keep calm and love Open Source :)</h3>
</div>
</div>
</body>
</html>
CSS code:
/**********************************************
Author: Qaidjohar
Creation Date: 13/09/16
Logical Comment: Animation Using CSS - CSS file
**********************************************/
*
{
margin:0px;
padding:0px;
}
.main
{
height:550px;
width:1000px;
margin-left: 183px;
}
.header
{
height:100px;
width:100%;
background-color:chocolate;
}
h1
{
color:aqua;
text-align:center;
line-height:100px;
}
.container
{
height:400px;
width:100%;
background-color:burlywood;
}
.go
{
height: 400px;
width: 130px;
float: left;
}
.ball
{
height: 120px;
width: 120px;
position: absolute;
margin-top: 230px;
margin-left: 200px;
animation: animBall 1.5s infinite;
}
.road
{
height: 50px;
width: 1000px;
position: absolute;
margin-top: 350px;
animation: animRoad 0.5s infinite;
}
.footer
{
height:50px;
width:100%;
background-color:chocolate;
}
h3
{
text-align:center;
line-height:50px;
color:darkred;
}
@keyframes animRoad
{
100% {margin-left: -10px;}
}
@keyframes animBall
{
25%{margin-left: 300px;margin-top: 130px; transform: rotate(90deg);}
50%{margin-left: 400px;margin-top: 30px; transform: rotate(180deg);}
75%{margin-left: 500px;margin-top: 130px; transform: rotate(270deg);}
100%{margin-left: 600px;margin-top: 230px; transform: rotate(360deg);}
}
Output:
