HTML and CSS Animations

CSS animations run keyframe sequences directly in the browser, ideal for micro-interactions, loading indicators, and storytelling without heavy JavaScript.

• Define an animation with @keyframes name { ... } .
• Specify property values at percentages (0%, 50%, 100%) or keywords ( from / to ).
• Apply the animation to elements with animation-name , animation-duration , and related properties.

The browser fills in the frames between them automatically.

If you want to read more about CSS Animations or get an in-depth understanding, go to CSS Animations in our CSS tutorial.

• animation-duration , animation-delay control timing.
• animation-timing-function sets easing between keyframes.
• animation-iteration-count defines loop count or infinite .
• animation-direction ( normal , reverse , alternate ).
• animation-fill-mode determines styles before/after animation.

Use animation shorthand to set multiple values at once.

This example defines a simple pulse using @keyframes and applies it to a dot.

The animation alternates between two states using the alternate direction.

The from / to keyframes scale and fade the dot.

The infinite alternate setting loops the animation back and forth smoothly.

• Use delays or staggered start times for list reveal animations.
• Combine multiple animations using comma-separated values.
• Paired elements can share keyframes with different durations or delays.

• Respect @media (prefers-reduced-motion: reduce) : disable or simplify animations.
• Avoid large parallax or flashing effects that cause motion sickness.
• Provide user controls for complex animated sequences.