css3动画浏览器支持-CSS3 动画曾经可以在 webkit 浏览器中运行，但现在不再可以了

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

我有两个 div 想要淡入淡出并相互滑动css3动画浏览器支持，所以我有 3 个动画：fadeIn、slideRight 和 slipLeft。 该动画在 Firefox 和 webkit 浏览器中都可以正常工作，但突然 slipRight 在 webkit 浏览器中停止工作。 该元素仍在淡入css3动画浏览器支持，另一个元素仍在淡入并向左滑动。

我已经研究这个问题几个小时了（包括查看无数其他 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很简单：

  /* some content */


  /* some content */

网址是这样你就可以看到发生了什么。 如果任何其他信息有帮助，请告诉我！ 特别感谢。