增加波紋效果波形

Question

我在此圓中創建了一個波紋效果。一切看起來不錯，但我希望這種效果更經常發生。另一波消失時需要很長時間才能出現。我試圖增加動畫的速度，但它並不好看：

以下是我迄今所做的：

.pulse { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: #bdebca; 
 
    border: 1px solid #b9e8c9; 
 
    border-radius: 50%; 
 
    z-index: -1; 
 
    text-align: center; 
 
    position: absolute; 
 
    transform: scale(0.1, 0.1); 
 
    animation: ring-1 2s ease-out infinite 
 
} 
 
@keyframes ring-1 { 
 
    0% { 
 
    transform: scale(0.1, 0.1); 
 
    opacity: 0 
 
    } 
 
    50% { 
 
    opacity: 1 
 
    } 
 
    100% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0 
 
    } 
 
} 
 

 
.ripple-icon .inner { 
 
    background-color: lightblue; 
 
    color: #fff; 
 
    /* animation: pulse 2s infinite; */ 
 
} 
 
.icon .inner { 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    font-size: 22px; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-weight: 700; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5); 
 
    cursor: pointer; 
 
} 
 
.icon { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
    transform: translateY(-50%); 
 
    margin: 0 auto; 
 
    left: 50%; 
 
    margin-left: -150px; 
 
}

<div class="ripple-icon icon hvr-bounce-in"> 
 
     <div class="inner"> 
 
    Ripple 
 
     </div> 
 
     <div class="pulse" style="left: 0px; top: 0px;"></div> 
 
    </div>

Answer 1

這樣的事情？添加更多的紋波，並將動畫開始時間分別延遲0.5s，1s，1.5s和2s。

瞭解更多關於動畫延遲：

1. https://developer.mozilla.org/en/docs/Web/CSS/animation-delay
2. https://css-tricks.com/almanac/properties/a/animation/

.pulse1, 
 
.pulse2, 
 
.pulse3, 
 
.pulse4 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: #bdebca; 
 
    border: 1px solid #b9e8c9; 
 
    border-radius: 50%; 
 
    z-index: -1; 
 
    text-align: center; 
 
    position: absolute; 
 
    transform: scale(0.1, 0.1); 
 
} 
 
.pulse1 { 
 
    animation: ring-1 2s 0.5s ease-out infinite; 
 
} 
 
.pulse2 { 
 
    animation: ring-1 2s 1s ease-out infinite; 
 
} 
 
.pulse3 { 
 
    animation: ring-1 2s 1.5s ease-out infinite; 
 
} 
 
.pulse4 { 
 
    animation: ring-1 2s 2s ease-out infinite; 
 
} 
 
@keyframes ring-1 { 
 
    0% { 
 
    transform: scale(0.1, 0.1); 
 
    opacity: 0 
 
    } 
 
    50% { 
 
    opacity: 1 
 
    } 
 
    100% { 
 
    transform: scale(1.2, 1.2); 
 
    opacity: 0 
 
    } 
 
} 
 
.ripple-icon .inner { 
 
    background-color: lightblue; 
 
    color: #fff; 
 
    /* animation: pulse 2s infinite; */ 
 
} 
 
.icon .inner { 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    line-height: 200px; 
 
    display: inline-block; 
 
    border-radius: 100%; 
 
    font-size: 22px; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-weight: 700; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    box-shadow: 0px 0px 103.74px 10.26px rgba(250, 250, 250, 0.5); 
 
    cursor: pointer; 
 
} 
 
.icon { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    text-align: center; 
 
    transform: translateY(-50%); 
 
    margin: 0 auto; 
 
    left: 50%; 
 
    margin-left: -150px; 
 
}

<div class="ripple-icon icon hvr-bounce-in"> 
 
    <div class="inner"> 
 
    Ripple 
 
    </div> 
 
    <div class="pulse1" style="left: 0px; top: 0px;"></div> 
 
    <div class="pulse2" style="left: 0px; top: 0px;"></div> 
 
    <div class="pulse3" style="left: 0px; top: 0px;"></div> 
 
    <div class="pulse4" style="left: 0px; top: 0px;"></div> 
 
</div>

Answer 2

在.pulse CSS，你可以改變動畫：ring-1 0.5s緩出無限 我把速度從2s改爲0.5s