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

Posted 2023-03-06

【中文标题】CSS3 动画在 chrome 和其他上有所不同

【英文标题】：CSS3 animation different on chrome and others

【发布时间】：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 的无效值，这可能对您的动画没有任何帮助。

【参考方案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;