CSS動畫問題

我試圖讓第二個div在淡入淡入時從左側滑入，然後一旦完成，第三個div向淡出時向左滑動。我究竟做錯了什麼？CSS動畫問題

我寫的CSS可能會淡入或滑入但不是兩者。

<div style="font-weight:bold;"> 
    <div style="float:left;width:100px;">Sport</div> 
    <div style="float:left;width:100px;">Entry $</div> 
    <div style="float:left;width:100px;"># Entries</div> 
    <div style="float:left;width:100px;">Max</div> 
    <div style="float:left;width:100px;">Time</div> 
    <div style="clear:both;"></div> 
</div> 
<hr> 
<div id="row1"> 
    <div style="float:left;width:100px;">NFL</div> 
    <div style="float:left;width:100px;">$50</div> 
    <div style="float:left;width:100px;">12</div> 
    <div style="float:left;width:100px;">48</div> 
    <div style="float:left;width:100px;">2:00ET</div> 
    <div style="clear:both;"></div> 
</div> 
<div id="row2" style="display:none;"> 
    <div style="float:left;width:100px;">NFL</div> 
    <div style="float:left;width:100px;">$5</div> 
    <div style="float:left;width:100px;">45</div> 
    <div style="float:left;width:100px;">100</div> 
    <div style="float:left;width:100px;">3:00ET</div> 
    <div style="clear:both;"></div> 
</div> 
<div id="row3"> 
    <div style="float:left;width:100px;">MLB</div> 
    <div style="float:left;width:100px;">$10</div> 
    <div style="float:left;width:100px;">1</div> 
    <div style="float:left;width:100px;">10</div> 
    <div style="float:left;width:100px;">1:00ET</div> 
    <div style="clear:both;"></div> 
</div> 

//CSS code I currently have right now 
#row2 { 
    left: -500px; 
    opacity:0; 
    -webkit-animation: slide 2.0s forwards; 
    -webkit-animation-delay: 2s; 
    animation: slide 2.0s fordwards; 
    animation-delay: 2s; 
    display: block !important; 
} 

#row3{ 
    -webkit-animation: slide1 2.0s backwards; 
    -webkit-animation-delay: 2s; 
    animation: slide1 2.0s backwards; 
    animation-delay: 2s; 
} 

@-webkit-keyframes slide { 
    25% { opacity: .25;} 
    50% { opacity: .50;} 
    75% { opacity: .75;} 
    100% { left: 8px; } 
    100% { opacity: 1; } 
} 

@keyframes slide { 
    25% { opacity: .25;} 
    50% { opacity: .50;} 
    75% { opacity: .75;} 
    100% { left: 8px; } 
    100% { opacity: 1; } 
} 

@-webkit-keyframes slide1 { 
    25% { opacity: .75;} 
    50% { opacity: .50;} 
    75% { opacity: .25;} 
    100% { left: -500px; } 
    100% { opacity: 0; } 
    100% { display: none;} 
} 

@keyframes slide1 { 
    25% { opacity: .75;} 
    50% { opacity: .50;} 
    75% { opacity: .25;} 
    100% { left: -500px; } 
    100% { opacity: 0; } 
    100% { display: none;} 
}

來源

2014-06-28 kirdua

什麼是前進和後退從來沒有聽說過這樣的CSS屬性？試試這些http://www.w3schools.com/css/css3_animations.asp – saj

@saj嘗試讀這個 - http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp –

@saj向前和向後是用於確定一旦完成播放後要保留哪個動畫幀 – Banana

看看固定Fiddle

你有幾個錯誤：

它總是「轉發」而不是「倒退」，它只是告訴CSS什麼一旦動畫完成播放，動畫的幀將保留，「向前」表示保留最後一幀，而「向後」表示保留第一幀。
你拼寫錯誤，並在其中一行寫上「fordwards」。
您多次設置了100%標記，您不能這樣做，只能設置一次並將所有內容都放入。
您無法調整靜態對象的左側屬性。所以除非你將div的位置設置爲絕對的，相對的或固定的，你需要使用margin-left。

來源

2014-06-28 15:15:16 Banana

+1非常好的工作 –

這裏有更多的錯誤，但你沒有提到它，OP動畫了'left'，而是使用'margin-left'沒有任何解釋。我也會說***你不能***不***不需要***。 –

很好完成...... – saj

嘗試以下操作：

@-webkit-keyframes slide { 
    0% { opacity: 0; margin-left: -500px; } 
    100% { margin-left: 8px; opacity: 1; } 
}

「左」似乎不是在某些瀏覽器當前版本（它只是沒有開發完全還）動畫。但是「保證金餘額」是。確保在開始和結束時提供關鍵幀。幻燈片的25％，50％和75％的關鍵幀是不必要的（除非要製作非線性動畫）。

來源

2014-06-28 15:16:41

回答

相關問題