SCSS – Flexible Animation

In modern web development, animations play a key role in enhancing user experience and interactivity. The SCSS snippet provided allows developers to create a highly flexible and customizable fade-in animation using CSS variables within keyframes.

Keyframe Definition with Customizable Variables

@keyframes fadeFromBottom {
    from {
        transform: translateY(var(--baseTranslateY, 30px));
        opacity: var(--baseOpacity, 0);
    }

    to {
        transform: translateY(var(--destTranslateY, 0px));
        opacity: var(--destOpacity, 1);
    }
}

This @keyframes rule, named fadeFromBottom, defines a vertical fade-in animation. The animation starts with the element translated downwards (or upwards if the value is negative) and transitions to its final position with full opacity. The use of CSS variables (--baseTranslateY, --destTranslateY, --baseOpacity, --destOpacity) allows for on-the-fly customization without altering the core animation logic.

Animation Class for Reuse and Extension

.anim-fadein {
    transform: translateY(var(--baseTranslateY, 30px));
    animation-name: fadeFromBottom;
    animation-duration: var(--animationDuration, 0.5s);
    animation-timing-function: var(--animationTiming, ease-in-out);
    animation-delay: var(--animationDelay, 0s);
    animation-iteration-count: 1;
    opacity: var(--baseOpacity, 0);
    animation-fill-mode: forwards;
}

.anim-fadein.fromBottom {
    // Variables start/end values of the animation
    --baseTranslateY: 20px;
    --baseOpacity: 0;
    --destTranslateY: 0;
    --destOpacity: 1;
}

.anim-fadein.fromTop {
    // Variables start/end values of the animation
    --baseTranslateY: -20px;
    --baseOpacity: 0.2;
    --destTranslateY: 0;
    --destOpacity: 1;

    --animationDuration: 0.8s;
}

The .anim-fadein class applies the animation to any element, initializing it in a transparent and translated state. Through modifier classes such as .fromBottom and .fromTop, developers can specify different starting points and opacities, as well as adjust the animation’s duration and easing function.

Advantages of Using This SCSS Snippet

• Modularity: Apply the .anim-fadein class to any element and easily override default values with modifiers.
• Customization: Adapt the animation to different contexts by setting CSS variables directly in the HTML or through additional SCSS classes.
• Ease of Use: Quickly implement a fade-in animation without writing multiple keyframe rules for each variation.

This approach to creating animations is a powerful way to add engaging and interactive elements to your website, ensuring a smooth and appealing user experience.

Usage example

See the Pen Flexible SCSS Animation by Victor DIANA (@LaTableRouge) on CodePen.