CSS Animation Example: The Stacked Card Fan

The "Stacked Card Fan" injects a delightful micro-interaction to stacked UI elements like a gallery album cover or a deck of virtual flashcards.

This layout uses multiple identically sized cards stationed directly atop one another inside a position: relative container using position: absolute. A randomized initial transform: rotate() creates "messiness", indicating the pile has multiple items. We also use transform-origin: bottom center so the cards fan outwards from their base.

Upon hover, we give each individual card class a distinct transformation command. The top card lifts, while the other two swing outwards by rotating and translating in respective directions. A bouncy cubic-bezier() value for the timing-function completes the playful appearance.

Here is the code to create The Stacked Card Fan 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: #f0f0f0;
}

.card-fan-container {
    position: relative;
    width: 250px;
    height: 350px;
    /* This allows the fan effect to overflow while keeping the hit area tight */
}

/* Base card styling */
.fan-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom center; /* Pivot from the bottom */
}

/* Adding unique background colors and starting rotations */
.fan-card.c1 {
    background-color: #ff6b6b;
    color: white;
    z-index: 1;
    transform: rotate(0deg);
}
.fan-card.c2 {
    background-color: #4ecdc4;
    color: white;
    z-index: 2;
    transform: rotate(3deg);
}
.fan-card.c3 {
    background-color: #ffe66d;
    color: #333;
    z-index: 3;
    transform: rotate(-3deg);
}

/* Spreading out on hover */
.card-fan-container:hover .fan-card.c1,
.card-fan-container:focus-within .fan-card.c1 {
    transform: rotate(-15deg) translateX(-30px);
}

.card-fan-container:hover .fan-card.c2,
.card-fan-container:focus-within .fan-card.c2 {
    transform: rotate(15deg) translateX(30px);
}

.card-fan-container:hover .fan-card.c3,
.card-fan-container:focus-within .fan-card.c3 {
    transform: translateY(-20px);
}

@media (prefers-reduced-motion: reduce) {
    .fan-card {
        transition: none; /* Instant snap */
    }
}
</style>

View Output

Accessibility Considerations

Rapid expanding layouts can be disorienting or distracting for some users. 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. We handle this effectively by removing the transition duration for users who have this setting enabled on their device.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .fan-card {
        /* Disables the animation swinging, snapping it open instantly */
        transition: none; 
    }
}

In addition, making the container keyboard-focusable by adding tabindex="0" combined with a :focus-within or :focus state on our hover ruleset ensures that those who navigate using a keyboard instead of a mouse can still trigger the fan-out behavior.