The @keyframes CSS rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes along the animation sequence. 

You can modify an animation by gradually changing from one set of CSS styles to another. During an animation, you can set of CSS styles many times. Here is an example for loading icon which in rotating in different styles.

<!-- add loader icon in body-->
<img class="loader" alt="Loading…" src="/loader.svg" />

<style>
  @keyframes fancy-spin {
    0% {
      transform: rotate(0turn) scale(1);
    }
    25% {
      transform: rotate(1turn) scale(1);
    }
    50% {
      transform: rotate(1turn) scale(1.5);
    }
    75% {
      transform: rotate(0turn) scale(1.5);
    }
    100% {
      transform: rotate(0turn) scale(1);
    }
  }
  
  .spinner {
    animation: fancy-spin 2000ms;
    animation-iteration-count: infinite;
  }
</style>

For best browser support, you should always define both the 0% and the 100% selectors.