原生css页面滑动到指定位置开始动画,如何使用CSS动画将固定位置元素从页面底部滑动到顶部？...

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.

解决方案

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;

}

}