@keyframes ym-motion-keyframes-bounce {

    from,
    65%,
    85% {
        transform: scale(1)
    }

    75% {
        transform: scale(0.85)
    }

    82.5% {
        transform: scale(1.05)
    }
}

@keyframes ym-motion-keyframes-fade-in {
    to {
        opacity: 1
    }
}

@keyframes ym-motion-keyframes-pulse {

    from,
    75% {
        transform: scale(0.85);
        opacity: 1;
    }

    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes ym-motion-keyframes-spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes ym-motion-keyframes-appear-above {
    from {
        transform: translateY(var(--ym-spacing-scale-2));
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes ym-motion-keyframes-appear-below {
    from {
        transform: translateY(calc(var(--ym-spacing-scale-2) * -1));
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes ym-motion-keyframes-skeleton-loader {
    // Skeleton loader animation basically moves background from `x=-100%` to
    // `x=+100%`, so that at the beginning and at the end of the animation loop no
    // gradient is leaking to the visible part. But we can't use percent-based
    // positioning, for animation speed would be different for elements with
    // different width. So we use a predefined max-width for
    // `.ym-animation-skeleton-loader`, and use its value for `-100%` and `+100%`
    // positioning.

    100% {
        background-position: 100vw 0px;
    }
}


@keyframes ym-motion-keyframes-backdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: var(--ym-backdrop-opacity)
    }
}