CSS3 动画曾经，但不再在 webkit 浏览器中工作答案

【问题标题】：CSS3 animation was, but is no longer working in webkit broswersCSS3 动画曾经，但不再在 webkit 浏览器中工作
【发布时间】：2015-01-25 04:58:40
【问题描述】：

我有两个 div 想要淡入并相互滑动，所以我有 3 个动画：fadeIn、slideRight 和 slideLeft。这些动画都在 Firefox 和 webkit 浏览器中运行，但突然 slideRight 停止在 webkit 浏览器中运行。该元素仍然淡入，另一个元素仍然淡入并向左滑动。

我已经看了几个小时（包括查看无数其他 stackoverflow 答案）并且由于其他工作部分而感到非常困惑。如果您能想到哪里出了问题，请告诉我！

css:

@-webkit-keyframes slideRight{
  from{-webkit-transform:translateX(-20px)}
  to{-webkit-transform:translateX(0)}
}
@-moz-keyframes slideRight{
  from{-moz-transform:translateX(-20px)}
  to{-moz-transform:translateX(0)}
}
@-o-keyframes slideRight{
  from{-o-transform:translateX(-20px)}
  to{-o-transform:translateX(0)}
}
@keyframes slideRight{
  from{transform:translateX(-20px)}
  to{transform:translateX(0)}
}
@-webkit-keyframes slideLeft{
  from{-webkit-transform:translateX(20px)}
  to{-webkit-transform:translateX(0)}
}
@-moz-keyframes slideLeft{
  from{-moz-transform:translateX(20px)}
  to{-moz-transform:translateX(0)}
}
@-o-keyframes slideLeft{
  from{-o-transform:translateX(20px)}
  to{-o-transform:translateX(0)}
}
@keyframes slideLeft{
  from{transform:translateX(20px)}
  to{transform:translateX(0)}
}
@-webkit-keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
@-moz-keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
@-o-keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}
#left{
  display: inline-block;
  -webkit-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -moz-animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -o-animzation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  animation: slideRight 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;  
}
#right{
  display: inline-block;
  -webkit-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -moz-animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -o-animzation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  animation: slideLeft 1500ms ease 1200ms, fadeIn 1500ms ease 1400ms;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

html 很简单：

<div id="left">
  /* some content */
</div>
<div id="right">
  /* some content */
<div>

该网站是http://gavel.co，因此您可以看到正在发生的事情。请让我知道是否有任何其他信息会有所帮助！非常感谢。

【问题讨论】：

这很有趣。您的 sn-p 工作正常，只是不在您的网站上。 旁注： You only really need the webkit prefix - like this example
@misterManSam 谢谢你的建议！我将清理其他前缀。会不会是一些js或者其他代码干扰了上面的代码，因为它单独工作正常？

标签： css google-chrome webkit css-animations

【解决方案1】：

这是因为我在这个特定的 CSS 正上方有一个“注释”，它不是正确的 CSS 注释。

我有

而不是

/* 动画 css */

所以错误注释后的第一行代码（即 webkit 浏览器向右滑动动画）没有被正确解释。

【讨论】：