Keyframes in Detail

You can define multiple steps inside keyframes.

Example:

@keyframes moveBox {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.box {
  animation: moveBox 3s ease-in-out infinite;
}

Practice Task:
Make a box move in a square path using keyframes (top, right, bottom, left).