使用 CSS 關鍵幀循環“波浪”動畫

Question

我正在嘗試為圓圈設置動畫以實現碰撞波的無限效果。

我奠定了基礎，但我無法使動畫的順序平滑和線性。

Codepen 可在此處獲得。

<div class="circles-container"
    <!-- 1er circle -->
    <svg width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" style="z-index: 1;">
      <path class="circle-1" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
    </svg>
    <!-- 2eme circle -->
    <svg width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" style="z-index: 2;">
      <path class="circle-2" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
    </svg>
    <!-- 3eme circle -->
    <svg width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" style="z-index: 3;">
      <path class="circle-3" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
    </svg>
</div>


.circles-container { position: relative; }

.circles-container svg {
  position: absolute;
  top: 0;
  left: 0;
}

.circle-1 {
  animation: scaleCircle 7.5s ease-in-out infinite;
  transform: scale(0);
  transition: all 2s ease-in-out;
  color: #1D1D28;
}

.circle-2 {
  animation: scaleCircle 5s ease-in-out infinite 2.5s;
  transform: scale(0);
  transition: all 2s ease-in-out;
  color: #420DC4;
}

.circle-3 {
  animation: scaleCircle 5s ease-in-out infinite;
  transform: scale(0);
  transition: all 2s ease-in-out;
  color: #1D1D28;
}

@keyframes scaleCircle {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(2);
  }
}

這是場景：

加載時，會顯示第一個藍色圓圈。

1. 第一個黑色圓圈不斷增長，直到它壓碎藍色圓圈
2. 在步驟 1 動畫的 50% 處，顯示並放大一個新的藍色圓圈，直到覆蓋在步驟 1 中創建的黑色圓圈
3. 返回步驟 1

在我的渲染中，您可以看到圓圈正在顯示，但有些圓圈隱藏得太早，等等。圓圈應該以線性方式一個接一個地顯示。

是否可以在帶有關鍵幀的完整 CSS 中做到這一點？

Answer 1

不確定這是否正是您想要的，但也許您可以修改它。

因此，使用 4 個圓圈，您基本上可以按照自己的方式為比例設置動畫。 然后對於他們的 svg 容器，您為 z-index 設置動畫，因此每當波開始時，它都會獲得最高的 z-index，然后在下一波開始之前停止。

<div class="circles-container">
  
  <!-- 1er cercle -->
  <svg class="circle-parent-1" width="1280" height="1280" xmlns="http://www.w3.org/2000/svg">
    <path class="circle-1" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
  </svg>

  <!-- 2eme cercle -->
  <svg  class="circle-parent-2" width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" >
    <path class="circle-2" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
  </svg>
  
  <svg  class="circle-parent-3" width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" >
    <path class="circle-3" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
  </svg>
  

  <svg  class="circle-parent-4" width="1280" height="1280" xmlns="http://www.w3.org/2000/svg" >
    <path class="circle-4" d="M0 0h640c0 353.466-286.534 640-640 640V0Z" fill="currentColor" fill-rule="evenodd" />
  </svg>
  
body {
  margin: 0;
  padding: 0;
}

.circles-container { position: relative; }

.circles-container svg {
  position: absolute;
  top: 0;
  left: 0;
}

.circle-parent-1 {
  animation: zIndexCircle 8s ease-in-out infinite;
  animation-delay: 0s;
}

.circle-parent-2 {
  animation: zIndexCircle 8s ease-in-out infinite;
  animation-delay: 2s;
}

.circle-parent-3 {
  animation: zIndexCircle 8s ease-in-out infinite;
  animation-delay: 4s;
}

.circle-parent-3 {
  animation: zIndexCircle 8s ease-in-out infinite;
  animation-delay: 4s;
}
.circle-parent-4 {
  animation: zIndexCircle 8s ease-in-out infinite;
  animation-delay: 6s;
}


.circle-1 {
  animation: scaleCircle 8s ease-in-out infinite;
  animation-delay:0s;
  transform: scale(0);
  color: #1D1D28;
}

.circle-2 {
  animation: scaleCircle 8s ease-in-out infinite;
  animation-delay:2s;
  transform: scale(0);
  color: #420DC4;
}

.circle-3 {
  animation: scaleCircle 8s ease-in-out infinite;
  animation-delay:4s;
  transform: scale(0);
  color: #1D1D28;
}

.circle-4 {
  animation: scaleCircle 8s ease-in-out infinite;
  animation-delay:6s;
  transform: scale(0);
  color: #420DC4;
}

@keyframes zIndexCircle {
    0% {
    z-index:5;
  }
  25% {
    z-index: 4;
  }
  50% {
    z-index:3;
  }
  75% {
    z-index:2;
  }
  
  100% {
    z-index:1;
  }
}
@keyframes scaleCircle {
  0% {
    transform: scale(0);
  }
  75% {
     transform: scale(2);
  } 
  100% {
    transform: scale(2);
  }
}

https://codepen.io/todilo-the-vuer/pen/XWEmdXL