special-pages/pages/onboarding/app/components/Icons.module.css
.bounceIn {
    animation-name: bouncein;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

    &[data-delay="normal"] {
        animation-delay: var(--anim-delay);
    }

    &[data-delay="double"] {
        animation-delay: var(--anim-delay-double);
    }
}

@keyframes bouncein {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.slideIn {
    animation-name: slidein;
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;

    &[data-delay="normal"] {
        animation-delay: var(--anim-delay);
    }
    &[data-delay="double"] {
        animation-delay: var(--anim-delay-double);
    }
}

@keyframes slidein {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

.slideUp {
    animation-name: slideup;
    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideup {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.fadeIn {
    opacity: 0;
    visibility: hidden;
    animation-name: fadeIn;
    animation-fill-mode: forwards;
    animation-duration: 300ms;

    [data-reduced-motion="true"] & {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}
