如何使用CSS动画将固定位置元素从页面底部滑动到顶部？ [英] 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/

这是我的动画代码：

@-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只是自动启动在顶部，而不是滑动到顶端。

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

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

Here's your fiddle example: http://jsfiddle.net/blineberry/cD4Gr/2/

这篇关于如何使用CSS动画将固定位置元素从页面底部滑动到顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！