Question

我在这里使用了一段片段来创建无限滚动元素https://css-tricks.com/infinite-all-css-scrolling-slideshow/

我在网站上使用的有效代码如下：

.wave_bg {
  background: url("../img/wave_bg.jpg") no-repeat;
  -webkit-animation: slide 10s linear infinite;
  -moz-animation: slide 10s linear infinite;
  -ms-animation: slide 10s linear infinite;
  animation: slide 10s linear infinite;
}

  @-webkit-keyframes slide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  @-moz-keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
  }
  @-ms-keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
  }
  @keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
  }

然而，在Chrome 34中，它突然停止工作（它在Chrome 33及更早版本中运行） - 背景图像根本没有出现（它在FF 33.1，FF 35.0.1，FF 38.0.5和IE 10仍然）。如果我在开发工具中禁用动画（并弃用-webkit-animation），那么背景图像会再次显示 - 所以我假设问题与CSS动画有关。

我无法找到（快速搜索）Chrome 34中关于动画的变化的任何文档 - 所以我想知道是否有人遇到过这个bug并且有某种解决方法吗？ / p>

Answer 1

我还没有看过你的代码......但是......当Chrome删除越来越多的前缀时，如果您的-webkit前缀只使用了-webkit-animation: infinite...，那么您的某些动画可能无法正常工作{{ 1}}。

确保在您的delcared动画中基本使用前缀和未加前缀的语法。见下文......

你需要这个......

@-webkit-keyframes infnite {
    0%   { -webkit-transform: scale(1); transform: scale(1);}
    100% { -webkit-transform: scale(2); transform: scale(1);}
}

，这......

@keyframes infnite {
    0%   { -webkit-transform: scale(1); transform: scale(1);}
    100% { -webkit-transform: scale(2); transform: scale(1);}
}

在上面的示例中...如果Chrome停止支持transform前缀但不支持keyframes，那么除非您同时使用前缀和前缀，否则您的动画将停止工作＆＃34;突然＆＃34; 。

Chrome中的动画34

1 个答案: