Use a child theme to add custom CSS safely
Open Appearance > Theme File Editor or use a custom CSS plugin
Add `@keyframes` animations in your CSS
Apply animations with the `animation` property
Animate hover states with `:hover`
Use `transition` for smooth simple effects
Add classes to blocks, buttons, or sections in the WordPress editor
Target WordPress elements with custom selectors
Use `transform` for scale, rotate, and move effects
Use `opacity` for fade-in and fade-out effects
Use `box-shadow` for glow and depth effects
Use `animation-delay` to stagger multiple elements
Use `animation-duration` to control speed
Use `animation-timing-function` for easing
Use `animation-iteration-count: infinite` for looping effects
Use `animation-fill-mode` to keep final animation states
Use `will-change` for performance on animated elements
Keep animations subtle and consistent with the site design
Test animations on mobile and desktop
Avoid animating layout-heavy properties like `width` and `height`
Use page builders or block plugins with custom CSS support
Add CSS classes in Gutenberg block settings
Insert animation CSS in the Customizer if your theme supports it
Use JavaScript only when CSS alone is not enough
Optimize animations for accessibility with reduced motion support
Add `@media (prefers-reduced-motion: reduce)` rules
Check for conflicts with theme or plugin styles