Clever Geek Handbook

How to move text using CSS animation?

Any ideas why this animation isn't working?

<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/

+3


source to share


2 answers


You need a position

base element that animates to animate from top to bottom.

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

Demo

More Info: As mentioned in this CSS Tricks article , you can also use the option translateY

if you don't want to explicitly specify the element position

.

Example 2 . Using transformationtranslateY() 



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

Demo for example 2

Update based on comments: It looks like even the latest versions of Chrome (v39.0.2145.4 dev-m), Opera (v23.0) and Safari v5.1.7 (on Windows), which are all webkit based, are still required vendor prefix ( -webkit-

) for animation.

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

The above is confirmed Can the website also be used . This site is recommended for browser validation of all CSS3 and HTML5 features.

+2


source


You need to position the element to animate its top and also leave out vendor prefixes (if you don't already).

@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

+2


source






More articles:


All Articles