CSS @keyframes Animationen in SCSS nutzen

Keyframes CSS Animation

CSS

@keyframes nav-underline-animation {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.nav-underline-animation {
    animation-name: nav-underline-animation;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

Diese Syntax funktioniert in .scss Files aber nicht.

Workaround, damit keyframes in SCSS genutzt werden können

SCSS

@mixin nav-underline-animation {
    @keyframes nav-underline {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
    animation-name: nav-underline;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}

Dann einfach via @include nav-underline-navigation bei gewünschtem Selektor einfügen.