To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.

This sample animation uses animation-iteration-count to make the flakes fall repeatedly, animation-direction to make the cloud move back and forth, animation-fill-mode to raise the snow level in response to the cloud movement, and animation-play-state to pause the animation.

To see the code for this animation, view the source on Github.

• animation shorthand
• animation-composition Experimental
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• animation-timeline

• @keyframes

• scroll()

All animations, even those with 0 seconds duration, throw animation events.

• animationstart
• animationend
• animationcancel
• animationiteration

• Web Animations API
• AnimationEvent
• CSSKeyframeRule
• CSSKeyframesRule

Using CSS animations

Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.

CSS animations tips and tricks

Tips and tricks to help you get the most out of CSS animations.

• will-change CSS property
• <easing-function> data type
• prefers-reduced-motion media query
• Bézier curve glossary term

• Experimental The CSS scroll timeline scroll-timeline-name and scroll-timeline-axis properties, along with the scroll-timeline shorthand, create animations tied to the scroll offset of a scroll container.
• Properties in the transitions CSS module to trigger animations based on user actions
• The <canvas> HTML element along with canvas API and WebGL API to draw graphics and animations
• The SVGAnimationElement interface for all the animation-related element interfaces, including SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement, and SVGAnimateTransformElement