CSS動畫和關鍵

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;將maintaine動畫的最後狀態，使得DIV停留在已設置的位置可見。

Demo Two

在本演示中，我對動畫的opacity代替的位置。

因此，將div從top: -80;滑動到top: 0; div的填充只是淡入到位。另外這個例子使用-webkit-animation-fill-mode: forwards;。

這裏有一個很好的資源，如果你想了解CSS動畫。 http://www.w3.org/TR/css3-animations/

希望這有助於！