帶延遲的CSS關鍵幀移動

我深深陷入這個動畫。我有我創造運動的路徑（不包括樣品供應商前綴的元素）：帶延遲的CSS關鍵幀移動

keyframes Path_1{ 
0% {left:54%;top:66%;} 
50% {left:54%;top:68%;} 
100% {left:54%;top:66%;} 
}

這將創建一個簡單的軌跡運動。路徑被供給到一些JS像這樣：

"path" : "54,66||54,68"

的JS循環遍歷通過所有座標和自動生成的路徑運動的關鍵幀。它還處理添加最後一個座標對來循環動畫。

我想知道是否有任何方法爲每個點提供特定的速度/延遲？

keyframes Path_1{ 
    0% {left:54%;top:66%;} <- 1s 
    50% {left:54%;top:68%;} <- 5s 
    100% {left:54%;top:66%;} <- 10s 
}

謝謝！

來源

2014-04-11 Aaron

您不能在關鍵幀聲明中提供額外參數的延遲。您基本上可以獲得百分比，您可以在其中定義哪些屬性是由什麼生成的，也可以是在百分比定義的整個動畫片段中的內容。

但是，有辦法做到這一點。我創建了一個jsfiddle here

.animation { 
    width: 100px; 
    height: 50px; 
    background-color: #f00; 
    animation: demo 5s ease-in infinite; 
} 

@keyframes demo { 
    0% { 
     width: 100px; 
    } 
    50% { 
     width: 400px; 
    } 
    90% { 
     width: 400px; 
    } 
    100% { 
     width: 100px; 
    } 
}

我們可以看到，動畫編程，最後5秒，但在一個點的延遲通過保持動畫屬性靜態的ñ％實現。在50％的情況下，動畫保持在400像素，並保持這種狀態直到90％，效果暫停2秒。 5s中的40％= 2s。

速度也可以通過調整百分比和整體時間來實現。動畫的第一部分比第二部分慢，因爲用於覆蓋相同距離的時間僅佔總時間的10％，而不是50％。

像往常一樣，CSS Tricks does a great run through什麼是可用的。

現在你只需要在你的json中定義這些數據並在你的javascript中解釋它來構建正確的關鍵幀anims，玩得開心！

來源

2015-06-07 22:08:20

帶延遲的CSS關鍵幀移動

回答

相關問題