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>
Add a comment
|
2 Answers
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;
}
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);}
}
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.
4 Comments
4thSpace
Looks like the -webkit vendor prefix code is required as well? Position alone doesn't seem to do it. I thought by now that browsers would be up to date enough that vendor prefixes aren't required. But that doesn't seem to be the case.
Harry
Depends on browser version mate. Chrome latest build doesn't need it but my Opera latest version (v23.0) still does. Edit: Sorry, even the latest Chrome version still needs it.
4thSpace
BTW, I'm using Safari 7.0.6 and it still requires the prefixes. Can I Use is incorrect.
Harry
All versions of Safari require prefixes mate. The yellow box in the version number box indicates it. Only items in green color with no yellow box doesn't need vendor prefixes.
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;
}
