CSS3 动画曾在 webkit 浏览器中运行，但不再运行

Question

我有两个 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这样你就可以看到发生了什么。如果任何其他信息有帮助，请告诉我!非常感谢。

Answer 1

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

我有

< !--animation css-->

而不是

/* animation css */

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