在webkit動畫延遲運行之前最先顯示的停止內容

我剛剛爲我的代碼添加了「動畫延遲」，以便內容僅在5秒後從屏幕外滑動。但是，我發現被移動的內容顯示在「最終」位置，而「延遲」正在運行，然後5秒後內容從左側滑入（根據需要）。在webkit動畫延遲運行之前最先顯示的停止內容

有沒有人知道我可以如何調整我的代碼，以便內容在最終位置最初不可見？這裏是我的代碼一個精簡版：

<style> 
div { 
width:100px; 
height:100px; 
background-color:red; 

-webkit-animation: slideFromLeft 3500ms ease-out; 
    -moz-animation: slideFromLeft 3500ms ease-out; 
    -ms-animation: slideFromLeft 3500ms ease-out; 

animation-delay:5s; 
    -webkit-animation-delay:5s; /* Safari and Chrome */ 
} 


@-webkit-keyframes slideFromLeft { 
      from { 
       opacity: 1; 
       -webkit-transform: translateX(-100%); 
      } 
      to { 
       opacity: 1; 
       -webkit-transform: translateX(0%); 
      } 
     } 
     @-moz-keyframes slideFromLeft { 
      from { 
       opacity: 1; 
       -moz-transform: translateX(-100%); 
      } 
      to { 
       opacity: 1; 
       -moz-transform: translateX(0%); 
      } 
     } 
     @-ms-keyframes slideFromLeft { 
      from { 
       opacity: 1; 
       -ms-transform: translateX(-100%); 
      } 
      to { 
       opacity: 1; 
       -ms-transform: translateX(0%); 
      } 
       } 


</style> 

<body> 

<div>

來源

2013-12-08 OneBigEgg

添加opacity:0的CSS初始股利。這種方式在動畫開始前是不可見的。

此外，請添加animation-fill-mode: forwards;以保持最終狀態。

http://jsfiddle.net/L29rW/1/

來源

2013-12-08 16:08:01 towr

謝謝。我是否需要以某種方式結束，將不透明度設置回1，因爲一旦動畫完成後生成的紅框消失了？ – OneBigEgg

我注意到紅色方塊在我向CSS添加'animation-fill-mode：forwards'之前就消失了，但是它已經爲我修復了它（使用FF25）。您可以嘗試使用特定於供應商的前綴，所以'-webkit-animation-fill-mode：forwards;'等。但是瀏覽器兼容性可能仍然是一個問題。另外，你可以看看jQuery的動畫函數：http://api.jquery.com/animate/ – towr

Thanks Towr，我採納了你的建議，並沿着Jquery路線 - 現在一切正常。乾杯 – OneBigEgg

在webkit動畫延遲運行之前最先顯示的停止內容

回答

相關問題