The Power of CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations have two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

Keyframes are King

The @keyframes at-rule is the heart of CSS animations. It lets you control the intermediate steps in a CSS animation sequence by defining styles for keyframes (or "waypoints") along the animation sequence.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
This simple keyframe will move an element from off-screen to its final position, creating a smooth slide-in effect.

Applying the Animation
Once you've defined your keyframes, you apply them to an element using the animation property.

.my-element {
  animation: slide-in 0.7s ease-out forwards;
}
Pro Tip: Using forwards in the animation shorthand ensures that the element retains the style values from the last keyframe when the animation ends.

Performance Considerations
When animating, it's best to stick to properties that don't trigger layout recalculations or repaints. The best properties to animate for performance are:

transform
opacity
filter
Animating properties like width, height, or top can be janky because they force the browser to do more work.