css3 animation keyframes timing only work in chrome

Question

css3 animation keyframes timing only work in chrome

70 Views Asked by gabrielchevalier At 04 April 2025 at 05:43

I've just created a preloader animation using css3 and it only works properly on Chrome... on all the other browsers, the animation IS working, but the timing for the bar in the middle is late, screwing the whole timing for the animation... I can't understand why, because all the keyframes are carefully set... any thoughts?

here's the animation on Fiddle and 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;
}
#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! ;)

Original Q&A

There are 1 best solutions below

**Manish Gupta** · Answer 1

Manish Gupta On 14 November 2014 at 19:58

Please try this:
http://jsfiddle.net/ygo2ebxo/7/

Is this working for you in all the browser?

You will have to remove the below line from the class .bar2red:

animation-delay:1.5s;

Hope it helps.

css3 animation keyframes timing only work in chrome

There are 1 best solutions below

Related Questions in CSS

Related Questions in GOOGLE-CHROME

Related Questions in ANIMATION

Related Questions in CROSS-BROWSER

Related Questions in KEYFRAME

Trending Questions

Popular # Hahtags

Popular Questions