Ghost/core/client/assets/sass/modules/animations.scss

/*
 * Specific styles for re-usable animations in Ghost admin.
 *
 * Table of Contents:
 * 
 *
 */


/* =============================================================================
   General
   ============================================================================= */

@-webkit-keyframes off-canvas {
    0%   { left:0; }
    100% { left:300px; }
}
@-moz-keyframes off-canvas {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes off-canvas {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes off-canvas {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@include keyframes(fadeIn) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@include keyframes(shift-rightwards) {
    0% {
        @include transform(translateX(-100%));
    }

    40% {
        @include transform(translateX(0%));
    }

    60% {
        @include transform(translateX(0%));
    }

    100% {
        @include transform(translateX(100%));
    }
}