.spin {
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

.stretch {
  animation: stretch 1s infinite linear;
}

@keyframes stretch {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(2, 1); }
  50%  { transform: scale(1, 1); }
  75%  { transform: scale(1, 2); }
  100% { transform: scale(1, 1); }
}

.ping {
  animation: ping 1s alternate infinite linear;
}

@keyframes ping {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%);  }
}

.pong {
  animation: pong 1s alternate infinite linear;
}

@keyframes pong {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
