如何使用CSS动画移动文本？ [英] How to move text using CSS animation?

问题描述

有人知道为什么该动画不起作用吗？

Any ideas why this animation doesn't work?

<style>
#movetxt {animation: moving 5s infinite;}

@keyframes moving {
    from {top: 0px;}
    to {top: 200px;}
}
</style>

<div id="movetxt">move from top to bottom</div>

http://jsfiddle.net/vdb3ofmL/1/

推荐答案

您应 position 要动画的基础元素，以便从上到下的动画起作用。

You should position the base element which is being animated for the top to bottom animation to work.

#movetxt {
    position: relative;
    -webkit-animation: moving 5s infinite;
    animation: moving 5s infinite;
}

演示

其他信息：如本 CSS技巧文章所述，您可以如果您不想明确地 position 元素，也可以使用 translateY 选项。

Additional Information: As mentioned in this CSS Tricks article, you could also use the translateY option if you don't want to position the element explicitly.

示例2：-使用 translateY（）转换

#movetxt {
    -webkit-animation: moving 5s infinite;
    animation: moving 5s infinite;
}
@keyframes moving {
    from {transform: translateY(0px);}
    to {transform: translateY(200px);}
}

示例2的演示

根据评论进行更新：看起来，即使最新的Chrome（v39.0.2145.4 dev-m），Opera（v23.0）和Safari v5.1.7（在Windows上）都由webkit提供支持，仍然需要供应商前缀（ -webkit-），动画才能正常工作。

Update based on comments: Looks like even the latest Chrome (v39.0.2145.4 dev-m), Opera (v23.0) and Safari v5.1.7 (on Windows) which are all powered by webkit, still require the vendor prefix (-webkit-) for animations to work.

Firefox（v32.0）和IE v10 动画不需要任何供应商前缀。

Firefox (v32.0) and IE v10 do not require any vendor prefixes for the animations.

以上内容已通过我也可以使用网站确认。推荐使用此站点来检查浏览器的所有CSS3和HTML5功能。

The above is confirmed by Can I use website also. This site is a recommended one for checking browser of all CSS3 and HTML5 features.

这篇关于如何使用CSS动画移动文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！