css3动画关键帧时间只在铬中工作

我刚刚使用css3创建了预加载器动画，它只能在Chrome上正常工作......在所有其他浏览器上，动画正在工作，但是在中间是迟到的，搞砸了整个动画的时机......我不明白为什么，因为所有的关键帧都经过精心设置......任何想法？css3动画关键帧时间只在铬中工作

这里的一对小提琴的动画和代码：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; 
} 
#bar2gray { 
    width:49%; 
    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:42%; left:21%; 
    overflow:hidden; 
} 
#bar3gray { 
    width:60%; 
    height:15%; 
    background-color:#D2D3D5; 
    transform: skewX(-15.71deg); 
    -webkit-transform: skewX(-15.71deg); 
    -ms-transform: skewX(-15.71deg); 
    position:absolute; top:68%; left:14%; 
    overflow:hidden; 
} 
.bar1red { 
    width:100%; 
    height:100%; 
    background-color:#F93725; 

    animation-name:bar1; 
    animation-duration:2s; 
    animation-iteration-count:infinite; 
    animation-timing-function:ease; 

    -moz-animation-name:bar1; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:ease; 

    -webkit-animation-name:bar1; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:ease; 

    -ms-animation-name:bar1; 
    -ms-animation-duration:2s; 
    -ms-animation-iteration-count:infinite; 
    -ms-animation-timing-function:ease; 

    -o-animation-name:bar1; 
    -o-animation-duration:2s; 
    -o-animation-iteration-count:infinite; 
    -o-animation-timing-function:ease; 
} 
.bar2red { 
    width:100%; 
    height:100%; 
    background-color:#F93725; 

    animation-name:bar2; 
    animation-duration:2s; 
    animation-iteration-count:infinite; 
    animation-timing-function:ease; 
    animation-delay:1.5s; 

    -moz-animation-name:bar2; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:ease; 

    -webkit-animation-name:bar2; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:ease; 

    -ms-animation-name:bar2; 
    -ms-animation-duration:2s; 
    -ms-animation-iteration-count:infinite; 
    -ms-animation-timing-function:ease; 

    -o-animation-name:bar2; 
    -o-animation-duration:2s; 
    -o-animation-iteration-count:infinite; 
    -o-animation-timing-function:ease; 
} 
.bar3red { 
    width:100%; 
    height:100%; 
    background-color:#F93725; 

    animation-name:bar3; 
    animation-duration:2s; 
    animation-iteration-count:infinite; 
    animation-timing-function:ease; 

    -moz-animation-name:bar3; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:ease; 

    -webkit-animation-name:bar3; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:ease; 

    -ms-animation-name:bar3; 
    -ms-animation-duration:2s; 
    -ms-animation-iteration-count:infinite; 
    -ms-animation-timing-function:ease; 

    -o-animation-name:bar3; 
    -o-animation-duration:2s; 
    -o-animation-iteration-count:infinite; 
    -o-animation-timing-function:ease;  
} 
/* animation BAR1 */ 
@-moz-keyframes bar1{ 
    0%{margin-left:-100%;} 
    25%{margin-left:0;} 
    65%{margin-left:0;} 
    90%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@-webkit-keyframes bar1{ 
    0%{margin-left:-100%;} 
    25%{margin-left:0;} 
    65%{margin-left:0;} 
    90%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@-ms-keyframes bar1{ 
    0%{margin-left:-100%;} 
    25%{margin-left:0;} 
    65%{margin-left:0;} 
    90%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@-o-keyframes bar1{ 
    0%{margin-left:-100%;} 
    25%{margin-left:0;} 
    65%{margin-left:0;} 
    90%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@keyframes bar1{ 
    0%{margin-left:-100%;} 
    25%{margin-left:0;} 
    65%{margin-left:0;} 
    90%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 
/* animation BAR2 */ 
@-moz-keyframes bar1{ 
    0%{margin-left:-100%;} 
    5%{margin-left:-100%;} 
    30%{margin-left:0;} 
    70%{margin-left:0;} 
    95%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@-webkit-keyframes bar2{ 
    0%{margin-left:-100%;} 
    5%{margin-left:-100%;} 
    30%{margin-left:0;} 
    70%{margin-left:0;} 
    95%{margin-left:100%;} 
    100%{margin-left:100%;}V 
} 

@-ms-keyframes bar2{ 
    0%{margin-left:-100%;} 
    5%{margin-left:-100%;} 
    30%{margin-left:0;} 
    70%{margin-left:0;} 
    95%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@-o-keyframes bar2{ 
    0%{margin-left:-100%;} 
    5%{margin-left:-100%;} 
    30%{margin-left:0;} 
    70%{margin-left:0;} 
    95%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 

@keyframes bar2{ 
    0%{margin-left:-100%;} 
    5%{margin-left:-100%;} 
    30%{margin-left:0;} 
    70%{margin-left:0;} 
    95%{margin-left:100%;} 
    100%{margin-left:100%;} 
} 
/* animation BAR3 */ 
@-moz-keyframes bar3{ 
    0%{margin-left:-100%;} 
    10%{margin-left:-100%;} 
    35%{margin-left:0;} 
    75%{margin-left:0;} 
    100%{margin-left:100%;} 
} 

@-webkit-keyframes bar3{ 
    0%{margin-left:-100%;} 
    10%{margin-left:-100%;} 
    35%{margin-left:0;} 
    75%{margin-left:0;} 
    100%{margin-left:100%;} 
} 

@-ms-keyframes bar3{ 
    0%{margin-left:-100%;} 
    10%{margin-left:-100%;} 
    35%{margin-left:0;} 
    75%{margin-left:0;} 
    100%{margin-left:100%;} 
} 

@-o-keyframes bar3{ 
    0%{margin-left:-100%;} 
    10%{margin-left:-100%;} 
    35%{margin-left:0;} 
    75%{margin-left:0;} 
    100%{margin-left:100%;} 
} 

@keyframes bar3{ 
    0%{margin-left:-100%;} 
    10%{margin-left:-100%;} 
    35%{margin-left:0;} 
    75%{margin-left:0;} 
    100%{margin-left:100%;} 
}

TKS！ ;）

来源

2014-11-14 gabrielchevalier

请试试这个：
http://jsfiddle.net/ygo2ebxo/7/

这是为你工作在所有的浏览器？

你将不得不从.bar2red类中删除以下行：

animation-delay:1.5s;

希望它能帮助。

来源

2014-11-14 19:58:47

tks，man！你是一个拯救生命的人......我没有注意到我忘了那边的那条线！ ;） – gabrielchevalier 2014-11-14 21:24:10

@gabrielchevalier谢谢。请标记为答案，如果它的工作！ – 2014-11-15 21:29:50

css3动画关键帧时间只在铬中工作

回答

相关问题