/*
 * 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(fade-in) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    -o-animation: fade-in 0.5s;
    -moz-animation: fade-in 0.5s;
    -webkit-animation: fade-in 0.5s;
    animation: fade-in 0.5s;
}

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

@include keyframes(fade-out) {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fade-out {
    -o-animation: fade-out 0.5s;
    -moz-animation: fade-out 0.5s;
    -webkit-animation: fade-out 0.5s;
    animation: fade-out 0.5s;
}