/*
 * Reusable keyframe animations
 *
 * Table of Contents
 *
 * Off-Canvas
 * Fade In
 * Fade Out
 */


/* ==========================================================================
   Off-Canvas
   ========================================================================== */

@include keyframes(off-canvas) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ==========================================================================
   Fade In
   TODO: Make the fadeIn keyframe name hyphenated, not camelCase
   ========================================================================== */

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

/* ==========================================================================
   Fade Out
   TODO: Make the fadeIn keyframe name hyphenated, not camelCase
   ========================================================================== */

@include keyframes(fade-out) {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}