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

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

但关于你的问题

有没有办法为不同的关键帧指定不同的立方贝塞尔

是的，可能

＆＃13;

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

＆＃13;

<div class="wave"></div>

＆＃13;

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

1 个答案: