css - CSS：如何将不同的动画应用于相同的元素？

Question

我有水动画。我想要两个keyframes有cubic-bezier(1,.41,.74,.45)，第三个有cubic-bezier(.38,.8,.68,.09)。换句话说，我需要波浪首先以相同的方式循环 2 次，最后一次以不同的方式循环。总的来说，动画中有3个keyframe循环。有没有办法cubic-bezier为不同的关键帧指定不同的 s 或为相同的元素应用不同的动画？

纯CSS。没有额外的元素。

这是动画第一部分的示例，这是第二部分的示例。

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>