6. Floating Animation

A floating animation creates gentle vertical movement that can work beautifully with illustrations, icons, mockups, and decorative graphics.

.float {
    animation: floating 4s ease-in-out infinite;
}

@keyframes floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

Unlike a fast bouncing effect, slow floating movement can feel surprisingly elegant.

This is especially useful in hero sections where you might have a laptop mockup, product screenshot, illustration, or decorative design element.

7. Animated Underline

Navigation links don’t have to settle for the standard browser underline.

You can create an underline that smoothly grows beneath the link instead.

.animated-link {
    position: relative;
    text-decoration: none;
}

.animated-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.animated-link:hover::after {
    width: 100%;
}

This is a great example of using CSS pseudo-elements for animation.

No extra HTML element is required.

It works particularly well for:

• Navigation menus
• Text links
• Category menus
• Portfolio filters
• Calls to action

You can even change the direction of the animation by adjusting the starting position of the pseudo-element.

8. Card Lift and Scale

Cards have become a standard part of modern web design.

You’ll find them in service sections, blog layouts, portfolios, pricing tables, dashboards, and ecommerce websites.

Animation can make them feel interactive.

.card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

Notice how small the scale change is.

That is intentional.

Modern CSS animation is often about micro-movement rather than dramatic movement.

A tiny shift can give the user enough visual feedback without making the interface feel unstable.

9. Shimmer Effect

You’ve probably seen shimmering effects used in modern applications while content is loading.

You can also use a shimmer selectively on buttons, backgrounds, badges, or highlighted content.

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    100% {
        left: 150%;
    }
}

The result is a streak of light that travels across the object.

This technique should be used sparingly because continuous movement naturally draws attention.

For the right element, though, it can look fantastic.

10. Animated Gradient Background

CSS can even animate gradients.

Here’s a simple example:

.animated-gradient {
    background: linear-gradient(
        -45deg,
        #1e3c72,
        #2a5298,
        #6a11cb,
        #2575fc
    );

    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

The large background size gives the gradient room to move, while changing background-position creates the animation.

Animated gradients can be particularly effective for:

• Hero sections
• Calls to action
• Landing pages
• Promotional areas
• Full-screen backgrounds

Slower animations usually look better than rapid color changes.

Bonus: Staggered CSS Animations

Here’s a trick that can make a group of elements look dramatically more polished.

Instead of displaying every element at exactly the same moment, stagger the animation.

For example:

.item {
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
}

.item:nth-child(1) {
    animation-delay: 0.1s;
}

.item:nth-child(2) {
    animation-delay: 0.2s;
}

.item:nth-child(3) {
    animation-delay: 0.3s;
}

.item:nth-child(4) {
    animation-delay: 0.4s;
}

Now the items appear one after another.

This is fantastic for:

• Service grids
• Features
• Team members
• Portfolio items
• Pricing plans
• Lists of benefits

It gives the impression of a much more sophisticated animation system using surprisingly little CSS.

Don’t Forget prefers-reduced-motion

Animation can improve usability for many people, but significant motion can also cause discomfort for some users.

Modern websites should respect a visitor’s reduced-motion preference.

You can do that with CSS:

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}

If a visitor has reduced motion enabled in their operating system, your website can dramatically minimize animated effects automatically.

It’s a small addition that makes your animation strategy much more accessibility-conscious.

CSS Animations vs. JavaScript Animations

Do you always need JavaScript for website animation?

Definitely not.

CSS is an excellent choice when you’re animating properties such as:

• Opacity
• Position
• Scale
• Rotation
• Colors
• Shadows
• Backgrounds
• Hover states

JavaScript becomes more useful when an animation depends on complex application logic, user behavior, scrolling calculations, timelines, or interactions involving multiple elements.

A good rule is:

If CSS can accomplish the animation cleanly, use CSS.

It keeps the implementation simpler and reduces your dependence on additional scripts or libraries.

CSS Animations in WordPress and Elementor

If you’re building with WordPress or Elementor, you don’t necessarily need another animation plugin.

Elementor includes a variety of built-in motion effects, but custom CSS gives developers much more control.

For example, you can assign a CSS class such as:

fade-up

to an Elementor container or widget and define the animation in your site’s custom CSS.

That means you can create your own reusable animation library and apply the same effects anywhere on the site.

You can build classes for:

fade-up
fade-in
float
pulse
card-lift
image-zoom
animated-link

Then simply add the appropriate CSS class to the element you want to animate.

This keeps animations consistent throughout the website.

The Secret to Good Website Animation: Restraint

CSS gives us the ability to animate almost anything.

That doesn’t mean we should.

One of the biggest mistakes in website design is adding animation simply because animation is available.

A good animation should accomplish something.

It might:

• Draw attention to an important action
• Show visitors that an object is clickable
• Explain a change in the interface
• Establish visual hierarchy
• Smooth the transition between states
• Add personality to a brand
• Make an interaction feel more responsive

If an animation doesn’t serve a purpose, the website may be better without it.

Subtle movement usually produces a more sophisticated result than dramatic effects.

You don’t need every heading flying in from the left, every image bouncing from the bottom, and every button glowing like it’s attempting to contact another planet.

Sometimes a four-pixel movement and a 300-millisecond transition are all you need.

Final Thoughts

CSS animations are one of the easiest ways to add polish to a website without adding heavy scripts or complicated animation systems.

Start small.

Add a subtle hover effect to your buttons. Give your cards a slight lift. Let important content gently fade upward as it’s introduced. Add an animated underline to navigation links.

Then look at the website as a whole.

The best animation isn’t necessarily the animation visitors notice.

It’s the animation that makes them think:

“This website feels really good to use.”