What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
You can add a CSS animation to a WordPress page without a plugin: give the target block a class, place a @keyframes rule and an animation declaration in the editor that matches your theme, then add a reduced-motion override. Block themes use Appearance > Editor > Styles; classic or Customizer-enabled themes use Appearance > Customize > Additional CSS. The same workflow works for a single Gutenberg block, repeated blocks, or a site-wide component.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
Choose the right place for your CSS
WordPress has two administration interfaces for site CSS, and the correct one depends on the active theme. A block theme is edited in the Site Editor. A classic theme, or a theme that still exposes the Customizer, uses the Customizer’s Additional CSS panel. The Customizer may be hidden entirely when a block theme is active.
As an Amazon Associate I earn from qualifying purchases.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →| Theme or project | CSS location | Best scope | What happens when you change themes? |
|---|---|---|---|
| Block theme | Appearance > Editor > Styles; open the Styles options and CSS field | Site-wide rules and classes used by blocks | Styles belong to the active block-theme setup; review them when changing themes |
| Classic or Customizer-enabled theme | Appearance > Customize > Additional CSS | Site-wide rules and classes | Customizer CSS is tied to the active theme and is inactive when you switch away from it |
| Per-block CSS panel | The selected block’s Styles interface, if the theme and WordPress version provide it | Every instance of that block type, rather than one named element | Stored with the block/theme configuration; test after theme changes |
| Child theme or enqueued stylesheet | A stylesheet loaded by your theme’s code | Reusable components, code review and deployment | Can survive a parent-theme update when implemented correctly; still requires testing with a new theme |
The site-wide CSS editor was placed in Styles in WordPress 6.2. In WordPress 6.9, the Additional CSS controls moved into the Styles header menu, so the exact button position can differ from an older tutorial. Look for the Styles options menu rather than assuming the Customizer exists.
Before you animate: define the target and the motion
Decide whether the effect is for one block, every block of a type, or a reusable component. A class such as hero-fade is appropriate for one or several intentionally selected elements. A rule entered in a block-type CSS panel is broader: it can affect every paragraph, button, image or other instance of that type.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
- Entrance effect: opacity and a small translation are suitable for content appearing once.
- State change: a hover or focus transition can communicate that an interactive control is available.
- Continuous motion: use sparingly; it can distract from reading and needs a visible pause or stop control when it lasts more than a few seconds.
- Decorative motion: keep it independent of essential text, controls and status messages.
Use transform for movement where possible. WordPress’s animation guidance recommends transforms because browsers can render them efficiently, producing smoother motion than repeatedly changing layout properties. Do not animate an aria-live region while it is actively reporting content.
Step 1: identify your theme interface
Block theme
- Sign in to WordPress.
- Open Appearance > Editor.
- Open Styles, then open the Styles options or header menu.
- Choose the CSS field (its position and label can vary by WordPress version and theme).
If you cannot find Appearance > Customize on a block theme, that is normal. Use the Site Editor’s Styles area instead of installing a plugin just to expose the Customizer.
Classic or Customizer-enabled theme
- Open Appearance > Customize.
- Select Additional CSS.
- Paste the CSS, use the live preview, and publish when the result is correct.
WordPress has supported adding custom CSS from the Customizer without editing the theme files since version 4.7. The CSS is associated with that active theme, so changing themes can make it disappear from the live design until you restore the original theme or move the rules to the new theme.
Step 2: give a Gutenberg block a class
- Open the page or template in the block editor.
- Click the block you want to animate.
- Open the block settings sidebar and expand Advanced.
- Enter a descriptive name in Additional CSS class(es), such as
hero-fade. Do not include a leading period. - Save or update the page.
WordPress writes that value into the block’s HTML class attribute. The selector in your stylesheet therefore needs a period: .hero-fade. Use lowercase names with hyphens, and choose a name that describes the component rather than the current page position. If you select several blocks, each receives the same hook and the same animation.
Step 3: add a keyframes animation
Paste the following example into the site-wide CSS editor you identified above:
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
@keyframes heroFade {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-fade {
animation: heroFade 600ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.hero-fade {
animation: none;
}
}What each declaration does
@keyframes heroFadedefines the beginning and end states. The name is arbitrary, but the name in the class rule must match it exactly.opacityfades the block from transparent to fully visible.transform: translateY(1rem)starts the block slightly lower without changing document layout.600msis the duration for this example; shorten or lengthen it to suit the content, but avoid making essential information wait to become readable.ease-outslows the movement as it reaches its final position.bothapplies the first keyframe before the animation starts and retains the final state afterward.- The media query turns off this non-essential effect when the visitor’s operating-system or browser setting requests reduced motion.
Save the CSS, preview the page, and publish only after checking the front end. The editor preview can differ from the public page because of theme styles, caching or responsive breakpoints.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchUsing the per-block CSS panel
Some WordPress versions and themes expose a CSS field in a block’s Styles interface. That field normally expects declarations only, without a selector. For example, a block-level field may accept:
color: #222;
transition: transform 180ms ease;It is not normally the place for a complete .hero-fade { ... } rule. WordPress also supports nested and pseudo-selector syntax in environments that implement it, but the accepted syntax depends on the editor and theme. If you need @keyframes, a reusable named class, or a reduced-motion media query, the site-wide CSS field is the more predictable location.
A per-block rule is useful when the intention is “apply this to every instance of this block type.” Test that scope carefully: a change made to the Button block, for example, may affect navigation, forms and calls to action throughout the site.
Animating common Gutenberg patterns
One hero or cover block
Add hero-fade to the Cover, Group or Columns block that contains the hero content. Keep the text and button visible in the final layout even when animation is disabled. Do not rely on opacity alone to communicate a state; visitors with reduced motion should see the same information immediately.
Recommended Free Tools
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
A list of cards
Give each card a shared class, such as feature-card, if all cards should use the same timing. To create a sequence, assign additional classes such as feature-card--two and set different animation-delay values. A sequence is still non-essential motion, so include the reduced-motion override for the whole card group.
.feature-card {
animation: heroFade 500ms ease-out both;
}
.feature-card--two {
animation-delay: 100ms;
}
.feature-card--three {
animation-delay: 200ms;
}
@media (prefers-reduced-motion: reduce) {
.feature-card,
.feature-card--two,
.feature-card--three {
animation: none;
}
}Buttons and links
For an interactive control, a short transition is usually safer than an entrance animation. Apply it to a class on the Button block and define visible :hover and :focus-visible states. Never remove the focus outline without replacing it with an equally obvious indicator.
.animated-button {
transition: transform 180ms ease, box-shadow 180ms ease;
}
.animated-button:hover,
.animated-button:focus-visible {
transform: translateY(-2px);
}Because this is a state transition rather than a long-running effect, the reduced-motion rule can reduce it to an immediate state change:
@media (prefers-reduced-motion: reduce) {
.animated-button {
transition: none;
}
}Reduced motion and accessible behavior
prefers-reduced-motion is the media feature that detects a visitor’s preference to minimize non-essential motion. WordPress guidance recommends putting animation and transition rules inside @media not (prefers-reduced-motion), or otherwise providing an explicit reduced-motion override. The example above uses an override because it keeps the normal rule easy to read and makes the fallback unmistakable.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →- Make content understandable in its final static state.
- Do not hide headings, prices, instructions or controls until an animation completes.
- Keep movement small and avoid rapidly flashing or spinning elements.
- Do not animate a live region that is announcing updates.
- For motion that continues for more than a few seconds, provide a visible pause or stop control.
- Check keyboard focus, text contrast and the page at 200% zoom as well as at normal size.
A reduced-motion setting is not an instruction to remove every visual change from the site. It is a signal to remove or substantially reduce motion that is not necessary to understand or operate the interface. A color change, border change or immediate static state can often communicate the same information.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Preview and test the animation
- Use the editor preview and the public URL after publishing or saving.
- Check a narrow mobile width, a typical desktop width and a wide desktop width.
- Reload the page to verify the entrance effect does not leave content permanently invisible.
- Tab through links and controls while the animation is running; focus must remain visible and usable.
- Turn on the operating system’s reduced-motion preference and reload. The block should appear without the entrance animation.
- Inspect pages that reuse the class. A global class may affect every matching block, not only the page you were editing.
- Check for horizontal scrolling or clipped content caused by transforms or overflow rules.
Use browser developer tools to confirm that the class is present on the intended element and that the stylesheet is loaded. If the rule is crossed out, a more specific theme rule or a later stylesheet is winning. If the class is absent, return to the block’s Advanced settings and check spelling.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common problems and fixes
The Additional CSS menu is missing
Confirm whether the site uses a block theme. Open Appearance > Editor > Styles and look in the Styles options or header menu. The Customizer can be unavailable by design on a block theme.
The animation does nothing
- Check that the Advanced field contains
hero-fade, not.hero-fade. - Check that the CSS selector is exactly
.hero-fade. - Check that the animation name in the class rule matches the
@keyframesname. - Clear page, browser and server caches after saving CSS.
- Inspect the element to see whether another rule sets
animation: noneor overrides the opacity and transform.
The block appears blank
An entrance animation can leave an element at its initial opacity if the keyframes or animation declaration is incomplete. Temporarily remove the animation declaration to confirm the underlying content and layout are present, then restore a complete rule with a final opacity: 1. Avoid combining a permanent visibility: hidden declaration with an animation unless you have tested every fallback.
The effect works in the editor but not on the public page
Make sure the CSS was saved in the correct editor and that the page was updated. Check whether a caching or optimization layer serves an older stylesheet. Also inspect the public markup: a template or reusable block may not contain the class you added to the editor instance.
Every block of a type changed unexpectedly
You probably used a block-type CSS panel or a broad selector. Move the declarations to a uniquely named class and add that class only to the intended blocks. Keep selectors narrow enough to avoid changing navigation, forms or other components.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
When to use a child theme or enqueued stylesheet
The built-in editor is the lowest-friction option for a small site, a one-off landing page or a designer who needs a live preview. It avoids editing theme files and works with ordinary CSS.
Use a child-theme stylesheet or a separately enqueued stylesheet when the animation is part of a maintained product. This approach lets a team review changes, keep CSS in version control, deploy the same file across environments and document why a component moves. It also avoids losing a carefully documented rule in an individual administrator’s editor settings. The implementation still needs to load after the relevant theme styles and should be retested when the theme or block markup changes.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Need | Recommended approach | Reason |
|---|---|---|
| One or a few blocks, immediate preview | Named class plus site-wide Additional CSS or Styles CSS | Fastest setup and easy visual feedback |
| Every instance of one block type | Per-block CSS panel, after checking its scope | Central rule for that block type |
| Reusable design system component | Child-theme or enqueued stylesheet | Versioning, code review and deployment control |
| Long-running decorative motion | Code-managed component with an explicit pause/stop control | Better control over accessibility and state |
Keep the CSS maintainable
- Use descriptive class names such as
hero-faderather than names tied to a color or page number. - Keep the
@keyframesname unique enough to avoid collisions with theme or plugin styles. - Store important CSS in version control or in the theme’s documentation, even when it is currently in the editor.
- Record which blocks use a class before deleting or renaming it.
- After a theme change, verify both the location of the CSS and the markup generated for the blocks.
- Remove unused keyframes and classes so future editors can understand which rules are active.
Customizer CSS follows the active theme. If a redesign is planned, export or copy the rules before switching, then adapt selectors to the new theme’s markup. For a block-theme migration, move the rules into the new Site Editor Styles CSS field or into a maintained stylesheet rather than assuming the old Customizer data will remain active.
A practical decision checklist
- Is the site using a block theme? If yes, start in Appearance > Editor > Styles.
- Is it a classic or Customizer-enabled theme? Start in Appearance > Customize > Additional CSS.
- Does one block need the effect? Add a class through Advanced > Additional CSS class(es).
- Should every block of a type receive it? Consider the per-block CSS panel, and test its broad scope.
- Does the motion add meaning or merely decoration? Keep essential information available without it.
- Have you included a reduced-motion rule? Disable or substantially reduce non-essential animation.
- Will the CSS need review, deployment or reuse across sites? Put it in a child-theme or enqueued stylesheet.
- Have you tested mobile, desktop, keyboard focus, contrast, reloads and reduced-motion settings?
Frequently Asked Questions
Where is Additional CSS in WordPress 6.9?
On a classic or Customizer-enabled theme, open Appearance > Customize > Additional CSS. On a block theme, use Appearance > Editor > Styles; in WordPress 6.9 the CSS controls are available from the Styles header menu rather than necessarily appearing in the Customizer.
How do I animate only one Gutenberg block?
Select the block, open Advanced, enter a class such as hero-fade in Additional CSS class(es), and target that class with .hero-fade in your site-wide CSS. Do not put the leading period in the block field.
What should happen when a visitor prefers reduced motion?
Keep the content visible and disable or substantially reduce non-essential animation with the prefers-reduced-motion media feature. Essential information and controls must not depend on the animation completing.
Will Customizer CSS survive a theme change?
Customizer CSS is tied to the active theme. Switching themes deactivates those styles until the original theme is restored or the rules are moved into the new theme’s Styles CSS field or a maintained stylesheet.
Quick Recap
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.
