html - 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

添加溢出-x:隐藏；到你的 body CSS。

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