如何使用CSS动画移动文本？

有什么想法为什么这个动画不起作用吗？

<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/ http://jsfiddle.net/vdb3ofmL/1/

你应该position正在为从上到下的动画工作而进行动画处理的基本元素。

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

Demo http://jsfiddle.net/vdb3ofmL/14/

附加信息：正如本文中提到的CSS 技巧文章 http://css-tricks.com/tale-of-animation-performance/，您还可以使用translateY如果您不想选择position明确的元素。

样本2：- 使用translateY()转型

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

示例 2 的演示 http://jsfiddle.net/vdb3ofmL/24/

根据评论更新：看起来甚至最新的 Chrome (v39.0.2145.4 dev-m)、Opera (v23.0) 和 Safari v5.1.7（在 Windows 上）都由 webkit 提供支持，仍然需要供应商前缀（-webkit-)让动画发挥作用。

火狐 (v32.0) 和 IE v10不需要任何供应商前缀对于动画。

上述内容已得到证实我可以用吗 http://caniuse.com/#feat=css-animation网站也。推荐使用此网站来检查浏览器的所有 CSS3 和 HTML5 功能。