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 and this is for the 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>

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

CSS: how to apply different animation to same elements?

css

animation

css-transitions

cubic-bezier