ArticleTemplates/assets/scss/base/_animation.scss

// /*doc
// ---
// title: Animation
// name: animation
// category: Base
// ---
// Fade in from right:
//
// ```html_example
// <div class="styleguide__anim">
//     <span class="animated fadeinright"></span>
// </div>
// ```
//
// Slide in from right:
//
// ```html_example
// <div class="styleguide__anim">
//     <span class="animated slideinright"></span>
// </div>
// ```
//
// Scale out:
//
// ```html_example
// <div class="styleguide__anim">
//     <span class="animated scaleout"></span>
// </div>
// ```
//
// Blink:
//
// ```html_example
// <div class="styleguide__anim">
//     <span class="animated blink"></span>
// </div>
// ```
// */

.animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.fadeinright {
    -webkit-animation-name: fadeinright;
    animation-name: fadeinright;
}

@-webkit-keyframes slideinright {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideinright {
    -webkit-animation-name: slideinright;
    animation-name: slideinright;
}

@-webkit-keyframes scaleout {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px) scale(.4);
        transform: translateX(-20px) scale(.4);
    }
}

.scaleout {
    -webkit-animation-name: scaleout;
    animation-name: scaleout;
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.blink {
    -webkit-animation-name: blink;
    animation-name: blink;
}

.section__live__pulse {
    -webkit-animation: blink 1.5s ease-in infinite;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}