How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?
16,149
It can't animate from a percent value to a default/auto value (or vice versa). This code gets it to work, albeit it starts offscreen:
@-webkit-keyframes silde_to_top {
0% {
top: 100%;
}
100% {
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
Here's your fiddle example: http://jsfiddle.net/blineberry/cD4Gr/2/
Comments
-
NullVoxPopuli almost 2 years
This is my animation code:
@-webkit-keyframes silde_to_top { 0% { bottom: 0%; top: default; } 100% { bottom: default; top: 0%; z-index: 1000000; opacity: 0.5; } } #test{ -webkit-animation-name: silde_to_top; -webkit-animation-duration: 5s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; }
currently, the div just auto-starts at the top, instead of sliding to the top. the only thing that animates is the opacity.