Question

正在开展一个项目，其中正在将一些CSS3动画代码插入到使用模板制作的网站上。

动画项目超出规模时出现了一些问题。

此处the website（向下滚动动画）

如果有人想要检查出来的话，请动画the fiddle。

可能有用的一些基本代码..

CSS：

#backgroundAnimation{
    color:#3c3c3c;
}

#containerAnimation{
    margin:0 auto;
/*    float : left;*/
    text-align: center;
    height: 100%;
    width:100%;
}

#innerWrapperAnimation{
    margin: 0 auto;
    border: 2px solid;
    float:none;
    position: relative;
    overflow:hidden;
    width:100%;
    display:block;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
    max-width: 1460px;
}

HTML：

<div id="containerAnimation">
    <div id="innerWrapperAnimation">
        <div><img class="lightsAnimation" id="light1Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-1.png" /></div>
        <img class="lightsAnimation" id="light2Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-2.png" />
        <img class="lightsAnimation" id="cameraFlashAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Camera-Flash.png" />
        <img id="backgroundAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/bg3.png" />
        <img class="boxAnimation" id="goodBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox2" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox3" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox4" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox5" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img id="badBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-2.png" />
        <img id="pistonBase" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_base.png" />
        <img id="pistonHead" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_head.png" />
        <img id="pistonOutline" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_top.png" />
        <div id="waveDisplay"><img id="waveImage" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Vital-sign-1.png" /></div>
    </div>
</div>

如果有人可以通过使用firebug或任何其他调试器来帮助我，并指出我我需要进行更改的地方。那会很棒的。

对于那些专业人士来说，我认为这是一个非常小的问题。

更新：动画容器的高度在网站内发生变化。我认为这就是问题所在。

Answer 1

您的更新是正确的。

动画元素（框）之间的<br>会导致容器高度扩大。

如果您添加CSS：#innerWrapperAnimation br { display: none;}，它会解决您的问题（或者，不要包含<br>元素）

Answer 2

尝试修复containerAnimation或innerWrapperAnimation，即在px中代替％并删除br标记，因为不同的浏览器占用不同的br空间。要创建一个朝向底部的行间距：尝试margin-bottom：在px或padding-bottom：以px为准。

CSS3定位/高度问题

2 个答案: