Question

我正在尝试使用css动画和关键帧在页面顶部显示一个多维数据集。但是他出现在开头并且只在动画之后出现。我如何让它从上面出现？

我想要加载页面并且过去两秒钟出现多维数据集。

<div id="cube"></div>


cube{
    position: relative;
    left:60px;
    width:100px;
    height:200px;
    background:red;     
    -webkit-animation-name: cube;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 0.8s;  
}
@-webkit-keyframes cube {
    0% {top: -200px;}
    100% {top: 0;}
}

这是我的例子

http://jsfiddle.net/hmmatos/epZJB/

Answer 1

很抱歉，如果我误解了你的问题，但我不确定你的意思，所以我做了两个不同的例子，希望至少其中一个可以帮到你。

Demo One

我在这里做的是我添加了-webkit-animation-fill-mode: forwards;，它将维护动画的最后状态，使div在您设置的位置保持可见。

Demo Two

在这个演示中，我正在设置opacity而不是位置的动画。

因此，将div从top: -80;滑动到top: 0;时，div填充就会消失。此示例也使用-webkit-animation-fill-mode: forwards;。

如果您想了解CSS动画，这是一个很好的资源。 http://www.w3.org/TR/css3-animations/

希望这有帮助！

css动画和关键帧

1 个答案: