NullVoxPopuli NullVoxPopuli - 3 years ago 155
CSS Question

How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

http://jsfiddle.net/cD4Gr/1/

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.

Answer Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download