artistry/src/styl/animation/slide.styl

A powerful and configurable stylesheet

// Top

@keyframes slide-top-in {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-top-out {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
}


// Right

@keyframes slide-right-in {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-right-out {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
}


// Bottom

@keyframes slide-bottom-in {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-bottom-out {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
}


// Left

@keyframes slide-left-in {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-left-out {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
}