Question

这是我的动画代码：

@-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;
}

目前，div只是自动从顶部开始，而不是滑到顶部。唯一能够动画的是不透明度。

Answer 1

它无法从百分比值设置为默认值/自动值（反之亦然）。这段代码可以使用它，虽然它从屏幕外开始：

@-webkit-keyframes silde_to_top {
  0% {
    top: 100%;
  }
  100% {
    top: 0%;
    z-index: 1000000;
    opacity: 0.5;
  }
}

这是你的小提琴示例：http://jsfiddle.net/blineberry/cD4Gr/2/

如何使用CSS动画将固定位置元素从页面底部滑动到顶部？

1 个答案: