CSS Animations #1

.custom-anim-shrink {
  animation: shrink;
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0); }
}

.custom-anim-rotate {
  animation: rotate;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.custom-anim-morph {
  animation: morph;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes morph {
  0% { border-radius: 0px; }
  100% { border-radius: 50px; }
}

.custom-anim-flip {
  animation: flip;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}