Why does the div with an id of "Second" animate slightly before the "first" div when using keyframe animation? I expected them to move at the same speed by default. Any help would be greatly appreciated, thank you.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
Here is the HTML code:
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
You can view the code on jsfiddle here: http://jsfiddle.net/x3p64/