title: Infinite loop with @keyframes
body: <p>I have a problem with animating icons vertically so that they change each other infinitely.</p>
  <p>The problem is that I have two icons and I need them to change in the way (1st icon - frog, 2nd icon - bird) 1 -&gt; 2 -&gt; 1 -&gt; 2 so that in looks like a full loop going in one direction(bottom), what I have now is that 1st icon to 2nd changes as wanted and then my animation goes back to first icon going backwards instead of forward.</p>
  <p>Here is <a href="https://codepen.io/sedulka/pen/QWpLJBm" rel="nofollow noreferrer">codepen</a></p>
  <p>I will be very glad if someone could help me.</p>
  <pre><code>@keyframes rotate {
   10%, 15% {
          transform: translateY(0);
   }
   25%,36% {
          transform: translateY(-45px);
   }
  }
  </code></pre>