CSS3動畫（關鍵幀動畫）

Question

我想下面的要求CSS3動畫，如果有人分享將是巨大的他/她的經驗

我有三個圖像

image1.jpg：這會從底部動畫頂部（image2.jpg和image3.jpg應該是隱藏）

image2.jpg：將出現在舞臺上一次image1.jpg加載（image3.jpg應該是隱藏）

image3.jpg：這是會出現最後的圖像image2.jpg後

感謝hepls

Answer 1

像這樣的事情？ http://jsfiddle.net/2hSqz/3/

這裏是一個動畫的例子：

div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } 

@keyframes myfirst { from {background: red;} to {background: yellow;} } 

而且這將是一個巨大的優化它爲每一個瀏覽器，如在

Answer 2

我不明白你想要什麼，但我試圖幫助也許你想這樣。

<style> 
      @keyframes move 
      { 
       from{top:100%} 
       to{top:0} 
      } 
      @keyframes visible 
      { 
       from{opacity:0} 
       to{opacity:1} 
      } 
      #img1{animation:move 5s; position:relative;} 
      #img2{animation:visible both 3s; animation-delay:5s; opacity:0;} 
      #img3{animation:visible both 3s; animation-delay:8s; opacity:0;} 

     </style> 

希望這是你想要的！