Animations

CSS Animations

Animations use @keyframes to define steps, then the animation property to apply them:

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.element {
  animation: slide-in 0.5s ease forwards;
}

animation shorthand: name duration timing-function delay iteration-count direction fill-mode

animation: bounce 1s ease-in-out infinite;
animation: spin 2s linear infinite;

Iteration count: 1, 3, infinite

Fill mode: forwards (keep end state), backwards (apply start state during delay)

Multi-step keyframes:

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Your Task

Create two animations using @keyframes: a bouncing effect and a spinning loader.