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/

回答1:

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;
}

Demo

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.

Sample 2: - Using the translateY() transformation

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

Demo for Sample 2

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) and IE v10 do not require any vendor prefixes for the animations.

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.

回答2:

You need positioning on the element to animate its top and also remember to specify vendor prefixes (if you are not already doing).

@keyframes moving {
    from {top: 0px;}
    to {top: 200px;}
}
@-webkit-keyframes moving {
       from {top: 0px;}
    to {top: 200px;}
}
#movetxt {
    animation: moving 5s infinite; 
    -webkit-animation: moving 5s infinite; 
    position:relative;
}

Demo

来源：https://stackoverflow.com/questions/25717562/how-to-move-text-using-css-animation

标签

css3

css-animations