1

我正在尝试使用 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/

4

1 回答 1

0

对不起，如果我误解了你的问题，但我不太确定你的意思，所以我做了两个不同的例子，希望其中至少一个能帮助你。

演示一

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

演示二

在这个演示中，我用动画opacity代替了位置。

因此，将 div 从滑动top: -80;到top: 0;div 填充只是淡入到位。此示例还使用-webkit-animation-fill-mode: forwards;.

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

希望这可以帮助！

于 2013-02-01T07:49:19.933 回答