How to define css animation? - css

Question

I have written this code to make a rectangle move from left to right like a car but this is not working. I think there is problem with #keyframes example
* {
margin: auto;
padding: 0px;
}
body {
background-color: lightgreen;
}
.main {
height: 100%;
width: 100%;
border: 1px solid black;
}
.road {
height: 300px;
width: 100%;
background-color: black;
margin-top: 25%;
}
#keyframes example {
from {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
to {
top: 20%;
left: 0%
}
}
#-webkit-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
#-moz-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
.car {
height: 100px;
width: 200px;
background-color: red;
font-size: 50px;
color: black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}

Answer 1

You need to use position: relative on .car to be displayed like that.
.car {
position: relative;
height:100px;
width:200px;
background-color: red;
font-size: 50px;
color:black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name:example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}

Answer 2

It seems that you're trying to move the car as if it were absolutely positioned. Make sure you have a wrapper that the car is inside of (In this case I'm assuming it's the road) and give that a relative position. Give you're car an absolute position. Here's a codepen I created that may help you!
https://codepen.io/anon/pen/MdYLOM
Also try making your animation like this:
#keyframes example {
0% { left: 0% }
100% { left: 100% }
}