.js [data-animation="slide-in"]
{
    @include for-at-least-normal-tablets
    {
        transition: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94); // easeOutQuad
        transition-property: opacity, transform;
        opacity: 0;

        will-change: transform, opacity;

        &[data-slide-from="top"]
        {
            transform: translateY(steps(-4));
        }

        &[data-slide-from="right"]
        {
            transform: translateX(steps(4));
        }

        &[data-slide-from="bottom"]
        {
            transform: translateY(steps(4));
        }

        &[data-slide-from="left"]
        {
            transform: translateX(steps(-4));
        }

        &.viewed
        {
            transform: none;
            opacity: 1;
        }
    }
}
