Sometimes we need to reuse animations without redundent code.

To handle this, we can use class to specify the animation configs, and apply the class to the element.

Ex:

.animation-pop {
  animation-name: pop;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-direction: alternate;
}

Next, add animation-pop to your class:

<div class="animation-pop"></div>

Addtionally, we can use animate.style to generate tons of reusable animations.

==Note: read the instruction before implementation==