Subtle motion can make a website feel polished. Too much animation slows pages, distracts and can make some visitors feel unwell.
Helpful animations
- Button hover and press feedback.
- Gentle fade-ins as sections appear.
- Smooth opening of menus and FAQs.
- Progress indicators on forms and loading.
Harmful animations
- Large animations that delay content.
- Autoplaying sliders.
- Parallax effects that make reading hard.
- Constantly moving elements near text.
Performance
Prefer CSS animations on transform and opacity, which are cheaper for browsers than animating layout. Avoid heavy animation libraries for simple effects.
Respect reduced motion
Honour the “prefers-reduced-motion” setting, which some users enable for comfort.
Content must not depend on animation
Important text should be visible even if animation does not run.
Create subtle button and gradient styles with our CTA button generator and CSS gradient generator.
Want the full picture? This article is part of Business websites: the complete guide, our in-depth guide with everything in one place.
