css3动画关键帧时序仅适用于chrome

时间：2014-11-14 19:08:50

标签： css3 google-chrome animation cross-browser keyframe

我刚刚使用css3创建了一个预加载器动画，它只能在Chrome上正常工作...在所有其他浏览器上，动画工作正常，但中间条的时间已经很晚，搞定了整个时间对于动画......我无法理解为什么，因为所有关键帧都经过精心设置......有什么想法吗？

这里是小提琴上的动画和代码：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！ ;）

1 个答案:

答案 0 :(得分：0)

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

这适用于所有浏览器吗？

您必须从.bar2red类中删除以下行：

animation-delay:1.5s;

希望它有所帮助。

相关问题
最新问题