錯誤與鏈接CSS3動畫

我試圖將CSS3動畫鏈接在一起，但他們有時表現得很奇怪。例如，在this pen中，爲什麼最後一個動畫不會啓動？我之前已經開始工作了，但現在不再使用了，我使用了相同的設置。我這裏貼的代碼是有點簡單，但動畫是完全一樣的：錯誤與鏈接CSS3動畫

HTML：

<div class="box"></div>

CSS：

body { 
    padding: 60px; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    background-color: black; 

    animation-name: fadeIn, fall, elastic; 
    animation-timing-function: ease, ease-in, ease-out; 
    animation-duration: 1s, 0.5s, 0.5s; 
    animation-delay: 0s, 0s, 0.5s; 
    animation-fill-mode: forwards, forwards, forwards; 
} 

@keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

@keyframes fall { 
    0% { transform: translateY(-100px); } 
    100% { transform: translateY(0px); } 
} 

@keyframes elastic { 
    0% { transform: translateY(0px); } 
    20% { transform: translateY(60px); } 
    40% { transform: translateY(-20px); } 
    60% { transform: translateY(10px); } 
    80% { transform: translateY(-5px); } 
    100% { transform: translateY(0px); } 
}

來源

2014-06-17 silvenon

也許我錯了..但是它似乎並不是因爲它們同時播放而「鏈接」它們。如果是這樣，那麼最後一個可能不起作用，因爲您已經在第二個動畫中對translateY進行了關鍵幀。

來源

2014-06-17 18:52:51 kthornbloom

你是對的，你不能同時動畫相同的屬性 – vals

我把它們連接起來，因爲我使用'動畫延遲'來連續播放它們。這很重要嗎？ – silvenon

其實，你是對的，如果在最後一組關鍵幀中設置了不同的屬性，它就可以工作！ – silvenon

錯誤與鏈接CSS3動畫

回答

相關問題