Animate.css 同时进行 fadeInLeft 和 fadeInRight

Question

我想同时使用Animate.css的fadeInLeft和fadeInRight，但是当元素出现时，水平滚动变得比实际屏幕尺寸大

让我告诉你我的意思。

每个元素都来自左右两侧，同时出现水平滚动。当元素彼此并排到达时，水平滚动就会消失。

我使用的代码：

HTML

<div class="tc">
    <div class="fl w-50">
        <div class="animate fadeInLeft">
        <img src="https://i.imgbox.com/Ism1Ekjf.jpg">
        </div>
    </div>

    <div class="fl w-50">
        <div class="animate fadeInRight">
        <img src="https://i.imgbox.com/Ism1Ekjf.jpg">
        </div>
    </div>
</div>

CSS

.tc { text-align: center; }
.fl { float: left; _display: inline; }
.w-50 { width: 50%; }

和Animate.css图书馆：https://github.com/daneden/animate.css/blob/master/animate.css

Answer 1

添加overflow-x：隐藏；到你的 body CSS。

这不是一个理想的情况，但应该可以解决问题！这基本上告诉浏览器忽略任何溢出 x-axis （水平）的东西。如果你想使用水平滚动条，你将需要一个不同的解决方案。

Animate.css 同时进行 fadeInLeft 和 fadeInRight

Animate.css's fadeInLeft & fadeInRight at the same time

html

css

animate.css