CSS3 动画在 chrome 和其他上有所不同答案

【问题标题】：CSS3 animation different on chrome and othersCSS3 动画在 chrome 和其他上有所不同
【发布时间】：2014-08-11 16:08:41
【问题描述】：

这是fiddle 我面临的问题的一个示例。此动画在不同的浏览器中具有不同的行为。我需要让所有工作都像 Chrome 一样工作。在 Chrome 和 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;
}

【问题讨论】：

奇怪，如果你最初设置right为0，它会从右边扩展
真的很奇怪的行为，但你可以使用这个解决方案jsfiddle.net/vVGmR/2 - 这里唯一的一个css规则是动画的，它可以工作。在 IE10、最新的 Firefox、Opera 和 Chrome 上测试
为我工作@VasiliyGorokhov。请张贴作为答案，而不是我可以接受的正确答案。谢谢。
请注意，inherit 是 left 和 right 的无效值，这可能对您的动画没有任何帮助。

标签： html css google-chrome animation

【解决方案1】：

您可以使用这个解决方案jsfiddle.net/vVGmR/2 - 这里唯一的一个 css 规则是动画的，它可以工作。在 IE10、最新的 Firefox、Opera 和 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;
}

【讨论】：