95. Introduction to CSS Keyframe Animations

While transitions handle changes between two states (e.g., normal to hover), CSS animations allow for complex, multi-step sequences of style changes over time.

Step 1: Defining Keyframes (@keyframes)

You first define the name and the steps of the animation using the @keyframes rule. Steps are defined by percentages (0% to 100%) or keywords (from and to).

css @keyframes pulse { /* Start state / 0% { transform: scale(1); opacity: 1; } / Mid-state / 50% { transform: scale(1.05); opacity: 0.8; } / End state */ 100% { transform: scale(1); opacity: 1; } }

Step 2: Applying the Animation

You apply the animation to an element using the animation property (shorthand) or its longhand properties.

css .pulsing-box { /* 1. Name 2. Duration 3. Timing Function 4. Iteration Count */ animation: pulse 2s ease-in-out infinite; }