脈動する円の間の一時停止

Question

CSSでアニメーションを作成しようとしています：脈動する円が2つあります。第2の円は最初の円より少し遅れて表示されます。次に同じ効果を一時停止してからもう一度やり直してください。私は正直に（私はアニメーションの遅延特性を意味するものではありません）それを管理する方法を見つけ出すことはできません。

.pulse { 
 
    border: 60px solid rgba(255, 255, 255, 0.2); 
 
    border-radius: 50%; 
 
    display: flex; 
 
    position: absolute; 
 
    -webkit-animation: pulsate 2s ease-out; 
 
    -webkit-animation-iteration-count: infinite; 
 
    background-color: red; 
 
} 
 

 
@-webkit-keyframes pulsate { 
 
    0% { 
 
    -webkit-transform: scale(0.5); 
 
    opacity: 0.2; 
 
    } 
 
    5% { 
 
    opacity: 0.3; 
 
    } 
 
    20% { 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    -webkit-transform: scale(3); 
 
    } 
 
}

<div class="marker"> 
 
    <div class="pin"></div> 
 
    <div class="pulse"> 
 
    <div id="pulse-outer"> 
 
    </div> 
 
    </div> 
 
</div>

ヘルプappeciatedされます！

私は右円（ただし、真ん中のドットなし）で、ここのような同じ効果を達成したい - >https://codepen.io/athimannil/pen/MaXxwv

Answer 1

あなただけのキーフレームを使用し続けると、何もイン起こりません2つのキーフレームを持つことができます〜の間：

@-webkit-keyframes pulsate { 
    0% { 
    -webkit-transform: scale(0.5); 
    opacity: 0.2; 
    } 
    5% { 
    opacity: 0.3; 
    } 
    20% { 
    opacity: 0.5; 
    } 
    30% { 
    opacity: 0; 
    -webkit-transform: scale(3); 
    } 
    100% { 
    opacity: 0; 
    -webkit-transform: scale(3); 
    } 

}