CSS：同じ要素に異なるアニメーションを適用するにはどうすればいいですか？

Question

私は水のアニメーションを持っています。 keyframesにはcubic-bezier(1,.41,.74,.45)、もう1つにはcubic-bezier(.38,.8,.68,.09)が必要です。言い換えれば、同じ方法で最初に2回ループし、最後には異なる動作をする波が必要です。全体として、アニメーションには3つのループがあります（keyframe）。異なるキーフレームに異なるcubic-bezierを指定する方法、または同じ要素に異なるアニメーションを適用する方法はありますか？

ピュアCSS。追加の要素はありません。

これはfirst part of animationの例であり、これはsecond partです。

Answer 1

あなたの要件はわかりません。

しかし、あなたの質問

について異なるキーフレーム

に異なる立方ベジエを指定する方法がありますはい、それが可能だ

@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>