A decade of Canvas at your command — powered by our custom AI engineStart Building →
Glossary

What Is CSS Animation?

CSS animation is a native browser feature that lets developers create smooth visual transitions and motion effects on HTML elements without relying on JavaScript. Using the @keyframes rule and a set of animation properties—such as animation-name, animation-duration, animation-timing-function, and animation-iteration-count—you can define multi-step sequences that control how an element changes style over time, from simple fades to complex multi-property choreography.

CSS animation properties

CSS provides eight core animation properties. animation-name links the element to a @keyframes block. animation-duration sets the total cycle time (e.g. 0.3s or 2s). animation-timing-function controls the acceleration curve—common values include ease, ease-in-out, linear, and cubic-bezier(). animation-delay postpones the start. animation-iteration-count defines how many times the cycle runs (use 'infinite' for continuous loops). animation-direction can reverse or alternate each cycle. animation-fill-mode determines styles before/after the animation (forwards, backwards, both). animation-play-state lets you pause and resume with 'paused' and 'running'. All eight can be combined in the shorthand 'animation' property for concise code.

How @keyframes work

@keyframes is a CSS at-rule that defines the stages of an animation. You declare it with a name—e.g. @keyframes fadeIn—then list percentage stops (0%, 50%, 100%) or the keywords 'from' and 'to'. At each stop you specify the CSS properties you want at that point; the browser interpolates between them. For example, @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } smoothly slides an element upward while fading it in. You can add as many intermediate steps as needed for complex sequences, and the same @keyframes block can be reused by multiple elements.

CSS animation vs JavaScript animation

CSS animations are hardware-accelerated by the browser's compositor thread, making them extremely efficient for properties like transform and opacity—they rarely cause layout reflow. JavaScript animations (via requestAnimationFrame or libraries like GSAP) offer more control: dynamic values, complex sequencing, scroll-linked triggers, and the ability to respond to runtime conditions. As a rule of thumb, prefer CSS animations for straightforward UI transitions (hover effects, entrance animations, loading spinners) and reach for JavaScript when you need physics-based motion, timeline orchestration, or values computed at runtime. The two approaches can also be combined—CSS handles the rendering while JS toggles classes or adjusts custom properties.

CSS animation in Canvas templates

Canvas Builder templates use CSS animations for entrance effects, hover interactions, and micro-interactions that make pages feel polished. Common patterns include fade-in-up on scroll-triggered sections, subtle scale effects on card hovers, rotating spinner icons during loading states, and gradient shifts on hero backgrounds. All animations in Canvas templates use transform and opacity exclusively to stay on the compositor thread and maintain high frame rates. Durations are kept between 200ms and 600ms for UI interactions to feel snappy without being jarring. The generated CSS is self-contained—no third-party animation libraries are required.

CSS Animation & Canvas Builder

Canvas Builder applies CSS animations to generated HTML templates for entrance effects, hover states, and micro-interactions. All animations use GPU-friendly transform and opacity properties, keeping pages fast. No third-party libraries are needed—the CSS is fully self-contained.

Try Canvas Builder →

Frequently Asked Questions

What is the difference between CSS transitions and CSS animations?
CSS transitions animate a property change between two states (e.g. on hover), triggered by a state change in the DOM. They require a trigger event and only define a start and end state. CSS animations use @keyframes to define multi-step sequences that can run automatically on page load, loop infinitely, alternate direction, and control intermediate steps at any percentage. Use transitions for simple two-state changes and animations for anything more complex.
Do CSS animations affect page performance?
CSS animations that only modify transform and opacity are composited on the GPU and have virtually no impact on page performance—they don't trigger layout or paint. However, animating properties like width, height, margin, or box-shadow forces the browser to recalculate layout and repaint, which can cause jank on lower-end devices. Always prefer transform (translate, scale, rotate) and opacity for smooth 60fps animations.
Can I pause and resume a CSS animation?
Yes. The animation-play-state property accepts 'running' (default) and 'paused'. You can toggle it via a CSS class or directly in JavaScript with element.style.animationPlayState = 'paused'. This is useful for pausing animations when a modal opens, when the tab is not visible (using the Page Visibility API), or when a user prefers reduced motion.
How do I respect the prefers-reduced-motion setting?
Wrap your animation declarations inside a @media (prefers-reduced-motion: no-preference) block so they only apply when the user has not requested reduced motion. Alternatively, define a reduced-motion media query that sets animation-duration to 0.01ms and animation-iteration-count to 1. This ensures accessibility compliance and respects operating-system-level motion preferences across macOS, Windows, iOS, and Android.