CSS: how to apply different animation to same elements?

Question

I have water animation. I want two keyframes to have cubic-bezier(1,.41,.74,.45) and third one to have cubic-bezier(.38,.8,.68,.09). In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there are 3 keyframe loops in animation. Is there a way to specify different cubic-beziers for different keyframes or apply different animations for same elements?

Pure CSS. No additional elements.

This is example for the first part of animation and this is for the second part.

if you want in one animation, you need to control it with the % in your keyframes — Mr. Alien, Apr 05 '17 at 14:10
tried controlling with %, but because cubic-bezier is being applied to each frame, it looked very weird and edgy. Animation was no longer smooth. — Alyona, Apr 05 '17 at 14:26

score 1 · Accepted Answer · answered Apr 06 '17 at 16:34

I am not sure what is your requirement.

But about your question

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

Yes, it's possible

@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: how to apply different animation to same elements?

1 Answers1