Ключевые кадры анимации css3 работают только в Chrome

Я только что создал анимацию предварительного загрузчика с помощью css3, и она правильно работает только в Chrome ... во всех других браузерах анимация работает, но время для полосы в середине запаздывает, прикручивая все время для анимации. ... Не могу понять почему, ведь все ключевые кадры тщательно выставлены... какие мысли?

вот анимация на Fiddle и код: 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%;}
}

Спасибо! ;)


animation google-chrome css keyframe cross-browser
person gabrielchevalier    schedule 14.11.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте следующее:
http://jsfiddle.net/ygo2ebxo/7/.

Это работает для вас во всех браузерах?

Вам нужно будет удалить следующую строку из класса .bar2red:

animation-delay:1.5s;

Надеюсь, поможет.

person Manish Gupta    schedule 14.11.2014
comment
спс, чувак! ты спасатель... Я и не заметил, что забыл вон ту строчку! ;) - person gabrielchevalier; 15.11.2014
comment
@gabrielchevalier Спасибо. Пожалуйста, отметьте как ответ, если это работает! - person Manish Gupta; 16.11.2014