title: CSS: how to apply different animation to same elements?
body: <p>I have water animation. I want two <code>keyframes</code> to have <code>cubic-bezier(1,.41,.74,.45)</code> and third one to have <code>cubic-bezier(.38,.8,.68,.09)</code>. In other words, I need waves to loop first 2 times same way, and on last one to behave differently. Overall, there are 3 <code>keyframe</code> loops in animation. Is there a way to specify different <code>cubic-bezier</code>s for different keyframes or apply different animations for same elements? </p>
  
  <p>Pure <code>CSS</code>. No additional elements.</p>
  
  <p>This is example for the <a href="https://jsfiddle.net/fbpf3oz4/" rel="nofollow noreferrer">first part of animation</a> and this is for the <a href="https://jsfiddle.net/2bzLfb2p/" rel="nofollow noreferrer">second part</a>.</p>