To add a CSS animation in WordPress, give the target block a distinctive CSS class, then write a matching CSS rule and @keyframes in a stylesheet-level CSS editor or theme stylesheet. In a block theme, use Styles → Additional CSS for site-wide rules; for one block instance, add a class in its Advanced settings and target that class in the site CSS. Keep motion optional for visitors who prefer reduced motion.
Choose where the animation CSS belongs
The right place depends on whether the effect is for one block, a whole block type, or a theme. The main distinction is whether the editor accepts a complete stylesheet—with selectors and @keyframes—or only property/value declarations.
| Approach | Best for | What to know |
|---|---|---|
| Styles → Additional CSS | Site owners using a block theme who need site-wide rules | Accepts stylesheet rules and applies custom CSS across the site. CSS added here is cleared when you switch themes. WordPress Styles overview. |
| Block Advanced settings → Additional CSS class(es), plus site CSS | A single block instance | Add a class to the block, then write a full rule for that class in site-wide CSS or a theme stylesheet. WordPress Advanced settings. |
| Per-block Additional CSS field | Simple declarations for a block type | The field automatically targets the block and expects property/value declarations, not a complete stylesheet with selectors and @keyframes. It requires the edit_css capability. WordPress Styles overview; Advanced settings. |
theme.json |
Theme developers styling supported design features | WordPress recommends it for theme styles where possible, to support compatibility with core, plugins, and user customizations. It is not a replacement for arbitrary CSS that the format cannot express. Theme Handbook: Global Settings and Styles. |
| Registered block stylesheet | Substantial CSS tied to a block in a theme | Organizes block-specific CSS; WordPress can load the stylesheet when that block is in use. Theme Handbook: Block-specific styling. |
Add an animation to one block
- Choose the block. In the editor, select the block you want to animate.
- Add a class. Open its Advanced settings and enter a distinctive name, such as
fade-in-on-load, in the Additional CSS class(es) field. Do not include a leading period. - Open a stylesheet-level CSS editor. For a block theme, go to Styles and open Additional CSS from the page’s ellipsis menu. Alternatively, use an appropriate theme stylesheet. The exact menu can differ by installed WordPress version and theme.
- Add the class rule and keyframes. For example, the following makes the block fade in and rise slightly when it appears:
@keyframes fade-in-on-load { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .fade-in-on-load { animation: fade-in-on-load 500ms ease-out both; } } - Save and check the result. View the page using the block and confirm that the effect appears as intended. If the CSS does not apply, check that the class name matches exactly and that the CSS was entered in a field that accepts full stylesheet rules.
This example does not keep the block hidden when animation is disabled: the element’s visible state is not dependent on the animation running. Change the keyframes, duration, or easing to suit the design, while keeping the reduced-motion condition.
Use the per-block CSS field only for declarations
WordPress also documents an Additional CSS field in block Advanced settings. It differs from the class field: WordPress automatically supplies the selector, so enter declarations rather than a complete rule. It is intended for straightforward styling and is restricted to users with the edit_css capability. A full animation that needs a named class and @keyframes belongs in site-wide CSS or a stylesheet instead. See the Advanced settings documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Find Additional CSS in your WordPress version
For block themes, the Styles overview says site-wide custom CSS has been available in the Styles interface since WordPress 6.2, and that in WordPress 6.9 the Additional CSS controls moved into the Styles page ellipsis menu. Check the interface in your installed version if the control is not where you expect: Styles overview.
Classic themes may instead expose CSS through Appearance → Customize. WordPress’s Advanced Administration guide says custom CSS through the Customizer became available starting with WordPress 4.7; this setting is tied to the theme. The route is not universal across themes, so use the interface your active theme provides: Customizing Your Site.
For theme and block developers
Use theme.json for supported theme styles
WordPress recommends theme.json when it can express the desired style. It provides a structured way to define supported settings and styles with compatibility for WordPress core, plugins, and user customizations. For an animation requiring arbitrary CSS rules or keyframes, use a stylesheet for the CSS that theme.json cannot represent. See the Theme Handbook.
Register a stylesheet for substantial block-specific CSS
For larger stylesheets associated with a particular block, the Theme Handbook describes creating a CSS file and registering it with wp_enqueue_block_style() on the init hook. WordPress can inline the CSS and load it when the relevant block is used, which keeps block-specific rules organized. See Block-specific styling.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Make motion accessible
The WordPress Block Editor Handbook says, “Animations should never block a user interaction.” It also advises against animating regions that are actively reporting content to assistive technology and recommends respecting the operating system’s reduced-motion preference with the CSS prefers-reduced-motion media feature (or useReducedMotion in React code). See the Block Editor accessibility guidance.
- Keep essential information visible and usable if animation does not run.
- Use
@media (prefers-reduced-motion: no-preference)to apply motion only when the visitor has not requested reduced motion, as in the example above. - Do not use movement that prevents or delays interaction, and avoid animating content that is actively announced to assistive technology.
When to use an animation plugin
A plugin is an optional route if you prefer editor controls to writing CSS. For example, the WordPress.org listing for Block Style Modifiers describes animation modifiers and reduced-motion behavior. Before relying on a plugin, check its current compatibility and maintenance information, and confirm how it handles reduced-motion preferences.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
