Keyframe Animations

Keyframe animations let you define a series of intermediate steps.

@keyframes slideIn {
  from { transform:translateX(-100%); opacity:0; }
  to   { transform:translateX(0);    opacity:1; }
}
.element { animation:slideIn 0.5s ease-out forwards; }

Animation properties:

• animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.

---

Example: Pulsing loader

@keyframes pulse {
  0%   { opacity:0.3; }
  50%  { opacity:1; }
  100% { opacity:0.3; }
}
.loader { animation:pulse 1.2s infinite; }