CSS：如何將不同的動畫應用於相同的元素？

我有水動畫。我想要兩個keyframes有cubic-bezier(1,.41,.74,.45)和第三個有cubic-bezier(.38,.8,.68,.09)。換句話說，我需要波浪以相同的方式前兩次循環，最後一次以不同的方式行動。總的來說，在動畫中有3個keyframe循環。有沒有辦法爲不同的關鍵幀指定不同的cubic-bezier，或者爲相同的元素應用不同的動畫？CSS：如何將不同的動畫應用於相同的元素？

純CSS。沒有額外的元素。

這是first part of animation的示例，這是針對second part的示例。

來源

2017-04-05 Alyona

指定不同的立方濟耶的方式，他們對我來說都是一樣的 –

第二個停止更多中間 – Alyona

如果你想在一個動畫中，你需要用關鍵幀中的％來控制它 –

我不確定你的要求是什麼。

但你的問題

是否有不同的關鍵幀

是的，這是可能的

@keyframes ripple { 
 
    0% { 
 
    transform: scale(1); 
 
    animation-timing-function: cubic-bezier(.38,.8,.68,.09); 
 
    } 
 
    50% { 
 
    transform: scale(0.27); 
 
    animation-timing-function: cubic-bezier(1, .41, .74, .45); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
.wave { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: solid 4px red; 
 
    border-radius: 50%; 
 
    animation: ripple 2s infinite; 
 
}

<div class="wave"></div>

來源

2017-04-06 16:34:59 vals

CSS：如何將不同的動畫應用於相同的元素？

回答

相關問題