Animations (@keyframes)

CSS Animations (@keyframes)

Run your own keyframe sequences, no JavaScript needed!

@keyframes

Define what happens at % points in time:

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

or with percentages:

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

Apply with the animation properties

Shorthand:

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

.box {
  animation: bounce 1s ease infinite;
}

Individual:

• animation-name: which keyframes.
• animation-duration: how long.
• animation-timing-function: easing.
• animation-delay: wait.
• animation-iteration-count: infinite or a number.
• animation-direction: alternate (forward/back).
• animation-fill-mode: forwards keeps the end state.
• animation-play-state: paused/running.

Fill mode

animation-fill-mode: none, forwards, backwards, both. forwards keeps the final styles after the animation ends.

Why animatable values only

Countdown works by changing animatable properties (opacity, transform...).

TL;DR

• @keyframes defines timeline (from/to or %).
• animation: name 1s ease infinite.
• piecewise: duration, iteration, direction, fill, play-state.
• transform/opacity = cheap to animate.