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浏览器右侧动画）未被正确解释。

CSS3动画是，但不再适用于webkit浏览器

1 个答案: