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

Question

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

纯 CSS。没有额外的元素。

这是 first part of animation 的示例这是给 second part 的.

Answer 1

我不确定你的要求是什么。

但是关于你的问题

Is there a way to specify different cubic-beziers for different keyframes

是的，这是可能的

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