如何使用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);}
}
根据评论进行更新:看起来,即使最新的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屋!