CSS Animation Example: Dropdown Fade & Scale

The "Dropdown Fade & Scale" elevates a standard nested menu by adding a subtle spatial entrance, making the UI feel polished and responsive.

A standard dropdown often toggles display: none to display: block, which unfortunately cannot be animated in CSS. Instead, we use a combination of visibility and opacity to hide the menu while keeping it animatable.

To add the "scale" effect, we apply a starting transform: translateY(-10px) scale(0.95) so the menu starts slightly smaller and higher up. Setting the transform-origin to top ensures it expands downward from the button. When the user hovers over the container, we transition these properties back to their natural state.

Here is the code to create the Dropdown Fade & Scale animation.

View Output

Accessibility Considerations

While this scaling effect is very subtle, it still involves motion, which can be unsettling for some users. Using the prefers-reduced-motion media query, we can strip away the transform scaling entirely for users who have enabled prefers-reduced-motion on their device. This leaves only the gentle opacity fade.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .dropdown-menu {
        /* Removes the slide/scale effect, keeping only the opacity fade */
        transition: opacity 0.2s ease, visibility 0.2s;
        transform: none; /* Reset transform back to default */
    }
    
    .dropdown-container:hover .dropdown-menu {
        transform: none;
    }
}