使用animations.css进行动画制作

Question

我正在尝试使用animations.css和css3-animate-it.js来制作一些有趣的动画。它使用起来非常简单，节省了大量时间。但是当使用这些文件时，css文件使我的页面水平滚动。我无法理解它为什么会发生。我只知道这是因为css文件。谁使用过这些文件并知道原因？这是我的代码：

    <div class="description">   
            <div class="general">
                 <div class="animatedParent"> 
                     <div class='animated bounceInDown'> 
                        <h2>General</h2>
                        <p> This is Photoshop's version  of Lorem Ipsum. 
                        Proin gravida nibh vel velit auctor aliquet. Aenean     sollicitudin, 
                        lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                        Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                        Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat 
                        auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia
                        </p>
                        <button  onclick="show()">MORE...</button>                  
                    </div>
                 </div> 
         </div> 


        <div class="religion">
                <div class="animatedParent"> 
                    <div class='animated bounceInUp'> 
                        <h2>Religion</h2>
                        <p> This is Photoshop's version  of Lorem Ipsum. 
                        Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, 
                        lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                        Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                        Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat 
                        auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia</p>
                        <button>MORE...</button> 
                    </div>
                </div>
        </div>

        <div class="location">
                 <div class="animatedParent"> 
                     <div class='animated bounceInDown'> 
                        <h2>Location</h2>
                        <p> This is Photoshop's version  of Lorem Ipsum. 
                        Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, 
                        lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
                        Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
                        Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris vitae erat consequat 
                        auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia</p>
                        <button>MORE...</button>                            
                    </div>
                </div>
        </div>
</div>

 .description{width:1320px;height:auto;
    margin:0 auto;
    clear:both;
    text-align:center;}

 .description>div{float:left;}
.general,
.religion,
.location{width:32%;margin:5px;padding-top:30px;background: rgb(245, 245,      242);}