绝对定位CSS3关键帧动画

时间:2012-06-19 22:27:01

标签: css css3 css-animations

http://jsfiddle.net/Wdrgv/

所以我想把这个坏动画放在屏幕的底部。很简单,对吧?

不。当我将position: absolute放在marquee-container上时,动画似乎从屏幕上消失。

我想我在这里做了一些非常愚蠢的事情,但我看不清楚。

2 个答案:

答案 0 :(得分:2)

问题在于,当您将绝对定位应用于容器时,'display: block;不再将其延伸到其容器宽度的100%,并且由于它没有相对定位的内容来定义其尺寸,因此它依赖于仅基于明确定义的值(height: 24px)或零(如果不存在)。我通过为您的包含元素定义width: 100%来解决问题。我还添加了一些调整,以便根据不同的文本长度使得选取框的大小和行为更加强大:

http://jsfiddle.net/Wdrgv/2/

答案 1 :(得分:1)

我可以通过从absolute更改为fixed并将bottom:0px;应用到其中来实现目标。

见这里:http://jsfiddle.net/Wdrgv/1/