Animate.css 与 Chrome 冲突答案

【问题标题】：Animate.css conflict with ChromeAnimate.css 与 Chrome 冲突
【发布时间】：2014-05-09 06:23:33
【问题描述】：

我遇到了 animate.css 中的动画问题从右侧进入的每个动画都扩展了我的容器。这仅在 chrome 中发生，并且仅适用于右侧的动画。有人知道解决方法吗？

【问题讨论】：

【解决方案1】：

您应该执行以下操作，例如：

html:

<div class="container">
    <img src="../" class="animated bounceInRight" />
</div>

css:

.container {
   overflow: hidden;
}

"overflow: hidden" 到 div 类 "container" 的规则消除了动画从右侧的水平滚动。 p>

【讨论】：

这确实有效，但是一个丑陋的解决方法，因为动画只在容器中运行，而不是整个页面。然后动画对象出现在页面中间。
.container 应该在 body 里面并且 .container 添加 width: 100% with overflow: hidden 例如jsfiddle.net/x9sfaapm/embedded/result
但我的容器不是 100% 宽度（而且不可能）。我想这就是问题所在。也许它是由引导程序（我在这里使用的）引起的。还是我必须再使用一个包装器？
是的，你必须有两个包装器，例如第一个包装器 -> 溢出：隐藏和宽度：100%，第二个包装器可以是宽度，在第二个包装器内放置带有动画bounceInRight 的元素.如果您愿意，请向我发送使用“jsFiddle”的代码示例
哈，终于明白了。谢谢老兄。