Animate.css fadeInLeft & fadeInRight zur gleichen Zeit

Question

Ich möchte Animate.css 'fadeInLeft und fadeInRight gleichzeitig verwenden, aber wenn die Elemente erscheinen, wird das horizontale Scrollen größer als die tatsächliche Bildschirmgröße.

Lassen Sie mich Ihnen zeigen, was ich meine.

Jedes Element kommt von der linken und rechten Seite und gleichzeitig erscheint das horizontale Scrollen. Wenn die Elemente nebeneinander ankommen, verschwindet das horizontale Scrollen wie es sein sollte.

Der Code ich benutze:

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%; } 

Und Animate.css Bibliothek: https://github.com/daneden/animate.css/blob/master/animate.css

Answer 1

Hinzufügen von Überlauf-x: versteckt; zu deinem Körper CSS.

Dies ist keine ideale Situation, aber sollte den Trick tun! Dies weist den Browser grundsätzlich an, alles zu ignorieren, was über die X-Achse (horizontal) fließt. Wenn Sie die horizontale Bildlaufleiste verwenden möchten, benötigen Sie eine andere Lösung.