CODEWITHSUNDEEP
htmlcssgoogle-chromeanimation
William Weckl
William Weckl

Reputation: 2465

CSS3 animation different on chrome and others

Here is in fiddle an example of the problem that I'm facing. This animation has different behavior in different browsers. I need to make all work as Chrome. Tested on Chrome and Firefox.

HTML:

<div class='wrap'>
  <div class='animate'></div>
</div>

CSS:

@keyframes test {
  0% {
    left: 0;
    right: inherit;
    width: 0;
  }

  10%{ width: 100%;}

  49%{ width: 100%;}

  59% {
    left: inherit;
    right: 0;
    width: 0;
  }

  100% { width: 0;}
}
@-webkit-keyframes test {
  0% {
    left: 0;
    right: inherit;
    width: 0;
  }

  10%{ width: 100%;}

  49%{width: 100%;}

  59% {
    left: inherit;
    right: 0;
    width: 0;
  }

  100% {width: 0;}
}

.wrap{
  height: 10px;
  position: relative;
  width: 100%;
}

.animate{
  background: #000;
  height: 10px;
  position: absolute;
  top: 0;

  -webkit-animation: test 6s infinite;    
  animation: test 6s infinite;
}

Upvotes: 2

Views: 128

Answers (1)

Vasiliy Gorokhov
Vasiliy Gorokhov

Reputation: 246

You can use this solution jsfiddle.net/vVGmR/2 - the only one css rule is animated here and it works. Tested on IE10, latest Firefox, Opera and Chrome

@keyframes test {
    0% {left: -100%;}
    10% {left: 0;}
    49% {left: 0;}
    59% {left: 100%;}
    99.99% {left: 100%;}
    100% {left: -100%;}
}

@-webkit-keyframes test {
    0% {left: -100%;}
    10% {left: 0;}
    49% {left: 0;}
    59% {left: 100%;}
    99.99% {left: 100%;}
    100% {left: -100%;}
}
.wrap{
    height: 10px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.animate{
    background: #000;
    height: 10px;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-animation: test 6s infinite;    
    animation: test 6s infinite;
}

Upvotes: 1

Related Questions