After creating a preloader animation using CSS3, I noticed that it only functions properly on Chrome. On all other browsers, the animation works, but the timing for the middle bar is delayed, throwing off the entire animation. I'm puzzled because all the keyframes are meticulously set. Any ideas?
Here's the animation on Fiddle along with the code: http://jsfiddle.net/chevalier/ygo2ebxo/6/
HTML:
<div id="wrapper">
<div id="bar1gray">
<div id="bar1gray_1" class="bar1red"></div>
</div>
<div id="bar2gray">
<div id="bar2gray_1" class="bar2red"></div>
</div>
<div id="bar3gray">
<div id="bar3gray_1" class="bar3red"></div>
</div>
CSS:
#wrapper {
width:100px;
height:100px;
position:relative;
margin:auto;
}
#bar1gray {
width:57%;
height:15%;
background-color:#D2D3D5;
transform: skewX(-15.71deg);
-webkit-transform: skewX(-15.71deg);
-ms-transform: skewX(-15.71deg);
margin-bottom:11px;
position:absolute; top:16%; left:29%;
overflow:hidden;
}
... (CSS code continues as provided)
tks! ;)