Can I add WordPress page animations without a plugin?

Yes, you can add basic page-load animations with a block CSS class, custom CSS and @keyframes . This works well for a small number of fades, slides or hover effects. Scroll-triggered animations are different: they need JavaScript or CSS scroll-driven features, and the manual setup becomes harder to maintain as the page grows.

Why does my WordPress animation work in the editor but not on the page?

The editor preview and the public page can use different markup and styles, so first confirm that your custom class appears on the front-end element. Also check for cached CSS, a selector with insufficient specificity, an optimisation plugin removing the rule, or a theme style that overrides opacity or transform. Test in a private browser window after clearing caches.

How do I animate an element when it scrolls into view?

Use JavaScript with IntersectionObserver to add an active class when the element enters the viewport, then let CSS animate that class. The script must load on the front end and target the correct class. If you do not maintain front-end JavaScript, use a visual animation plugin instead of placing scripts directly into page content.

Are WordPress animations bad for accessibility?

Animations are not automatically inaccessible, but excessive movement can distract users or cause discomfort. Keep effects short, do not hide essential information until an animation finishes, avoid large continuous motion, and include a prefers-reduced-motion rule that removes or reduces non-essential effects.

What is the quickest way to add several page animations?

A visual animation tool is usually quicker once you need several elements, scroll triggers, delays or reusable sequences. Motion.Page is suited to this because it lets you animate WordPress elements through a visual builder without writing each CSS and JavaScript interaction by hand. For one simple fade-in, custom CSS remains the quickest option.

How to add animations to WordPress pages

Design & Layout Time About 30 minutes 6 steps Updated 3 Nov 2026

The short answer

You can add simple page-load animations in WordPress with a CSS class and custom CSS. Scroll-triggered effects need JavaScript or an animation plugin, so use the manual route for a few basic effects and a visual tool for larger pages.

The route

01Choose the elements to animate
02Add a unique CSS class
03Add a CSS entrance animation
04Add a delay only where needed
05Support reduced motion
06Use a visual tool for scroll effects

What you need

Admin access to the WordPress site
A page or template you can edit
Permission to add custom CSS
A staging site or recent backup for testing

Choose the elements to animate

Pick one or two elements, such as a hero heading, button or image. Use a short fade or slide rather than animating every block on the page. Too much movement makes the page harder to scan and can cause layout problems.

Decide whether the effect should run when the page loads or when the element enters the viewport. CSS alone is suitable for a basic load animation; scroll-triggered effects need a visibility trigger such as JavaScript or a visual animation tool.

Add a unique CSS class

Edit the page and select the block you want to animate. Open its block settings, expand Advanced, and enter a unique name in Additional CSS class(es), such as page-fade-in. Do not include the full stop used before a class in CSS. WordPress supports adding a class to a block and then targeting that class with custom CSS.

Save the page, but keep the editor open while you add the CSS. If the class is too general, the animation may affect other sections that use the same class name.

Add a CSS entrance animation

Add this CSS in Appearance → Editor → Styles → Additional CSS for a block theme, or in Appearance → Customize → Additional CSS where the Customizer is available. WordPress documents the Site Editor route for site-wide CSS, while the Customizer route depends on the theme.

.page-fade-in { animation: page-fade-in 700ms ease-out both; } @keyframes page-fade-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

The keyframes define the start and end states, while animation-fill-mode: both keeps the element from briefly showing in the wrong state before or after the animation.

Add a delay only where needed

For a heading followed by a button, add a second class such as page-fade-in-delay and use a small delay: .page-fade-in-delay { animation-delay: 150ms; }. Keep delays short and avoid hiding important content for several seconds.

If the animation does not appear, inspect the page source or browser developer tools and check that the class is on the front-end element, the CSS is saved, and another rule is not overriding opacity, transform or the animation name. Caching and optimisation plugins can also serve an older stylesheet, so clear their cache after saving.

Support reduced motion

Respect visitors who have enabled reduced motion in their operating system or browser. Add this rule below the animation:

@media (prefers-reduced-motion: reduce) {.page-fade-in,.page-fade-in-delay { animation: none; opacity: 1; transform: none; } }

The prefers-reduced-motion media feature is intended for users who want non-essential motion removed or reduced, including people who experience discomfort from movement.

Use a visual tool for scroll effects

CSS entrance animations are fine for a few elements, but CSS classes alone do not give you a convenient editor for scroll position, timelines, staggered sequences or interactions. A manual scroll effect needs front-end JavaScript that watches when an element enters the viewport; the browser API commonly used for this is IntersectionObserver.

For the fast route, use Motion.Page. It provides a visual, no-code builder for animating WordPress elements, which is useful when your theme or page builder does not offer advanced motion controls. Build the effect visually, apply it to the selected page elements, then check the front end on desktop and mobile before publishing.

The fast route

Let Motion.Page do it

Visual no-code animations for any WordPress element, ideal when page builders lack advanced motion controls.

Get Motion.Page

Sources

wordpress.com /support/wordpress-editor/adding-additional-css-classes-to-b…
wordpress.org /documentation/article/styles-overview/?utm_source=openai
developer.mozilla.org /en-US/docs/Web/CSS/Guides/Animations/Using?utm_source=opena…
developer.mozilla.org /en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-redu…
developer.mozilla.org /en-US/docs/Web/API/Intersection_Observer_API?utm_source=ope…

Questions

Can I add WordPress page animations without a plugin?: Yes, you can add basic page-load animations with a block CSS class, custom CSS and <code>@keyframes</code>. This works well for a small number of fades, slides or hover effects. Scroll-triggered animations are different: they need JavaScript or CSS scroll-driven features, and the manual setup becomes harder to maintain as the page grows.
Why does my WordPress animation work in the editor but not on the page?: The editor preview and the public page can use different markup and styles, so first confirm that your custom class appears on the front-end element. Also check for cached CSS, a selector with insufficient specificity, an optimisation plugin removing the rule, or a theme style that overrides opacity or transform. Test in a private browser window after clearing caches.
How do I animate an element when it scrolls into view?: Use JavaScript with <code>IntersectionObserver</code> to add an active class when the element enters the viewport, then let CSS animate that class. The script must load on the front end and target the correct class. If you do not maintain front-end JavaScript, use a visual animation plugin instead of placing scripts directly into page content.
Are WordPress animations bad for accessibility?: Animations are not automatically inaccessible, but excessive movement can distract users or cause discomfort. Keep effects short, do not hide essential information until an animation finishes, avoid large continuous motion, and include a <code>prefers-reduced-motion</code> rule that removes or reduces non-essential effects.
What is the quickest way to add several page animations?: A visual animation tool is usually quicker once you need several elements, scroll triggers, delays or reusable sequences. Motion.Page is suited to this because it lets you animate WordPress elements through a visual builder without writing each CSS and JavaScript interaction by hand. For one simple fade-in, custom CSS remains the quickest option.