CSS Animation Example: Floating Particles

"Floating Particles" (or digital fireflies) is a moody background effect best suited for dark themes, SaaS products, or gaming websites to provide a sense of atmospheric depth.

Atmospheric Depth

This animation is constructed using absolute positioning and overflow: hidden on the parent container. We start all particles below the visible fold by setting bottom: -10%.

We then apply two simultaneous @keyframes animations to each particle:

float-up: Drives the particle upward utilizing transform: translateY(). A slight translateX adds a natural angled drift mimicking wind.
fade-out: Controls the opacity, starting at 0, blooming to 1 as it rises into screen, and dropping back to 0 before it hits the roof to ensure it doesn't just abruptly vanish off-screen.

Providing unique animation-duration and animation-delay variables to each particle class is required to make the swarm look random and organic. In a production environment, you might write a tiny Javascript loop to generate 50+ of these with randomized classes.

Here is the code to create the Floating Particles animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #0f172a; /* Deep blue night sky */
}

.particles-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border-radius: 50%;
    /* Start them off the bottom of the screen */
    bottom: -10%; 
    
    /* 
       1. float-up: carries them upward at varying speeds.
       2. fade-out: makes them disappear before hitting the top.
    */
    animation: 
        float-up 8s infinite linear,
        fade-out 8s infinite ease-out;
}

/* Adding glowing variations */
.particle.glow {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    background-color: white;
}

/* Manually placing a few for the demo. In a real app, you might generate 50 of these via JS */
.p1 { left: 10%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0s; }
.p2 { left: 25%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: 2s; }
.p3 { left: 45%; width: 3px; height: 3px; animation-duration: 7s; animation-delay: 4s; }
.p4 { left: 65%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 1s; }
.p5 { left: 85%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 3s; }

@keyframes float-up {
    to {
        transform: translateY(-120vh) translateX(20px); /* Drift up and slightly right */
    }
}

@keyframes fade-out {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; } /* Fade out near the top */
}

@media (prefers-reduced-motion: reduce) {
    .particle {
        display: none; /* Safest to remove moving background cruft entirely */
    }
}
</style>

View Output

Accessibility Considerations

Endless, unprompted background movement can become deeply distracting, making the foreground text hard to read. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion.

Because particles exist solely as decorative motion flair, if a user has indicated they prefer reduced motion, it is best to simply disable the particles entirely and render a clean, still background.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .particle {
        /* Nuke 'em */
        display: none; 
    }
}