/**
 * Animation 动画
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-28 13:02
 */

// Classes
.#{$classPrefix}-animate-fade-in-up {
    animation: shine-animate-fade-in-up .5s;
}

.#{$classPrefix}-animate-fade-out {
    animation: shine-animate-fade-out .5s;
}

.#{$classPrefix}-animate-fade-in {
    animation: shine-animate-fade-in .5s;
}

.#{$classPrefix}-animate-blink {
    animation: shine-animate-blink 1s step-start 0s infinite;
    animation-fill-mode: initial;
}

.#{$classPrefix}-animate-shake {
    animation: shine-animate-shake 0.1s ease-in 0.1s infinite alternate;
    animation-fill-mode: initial;
}

.#{$classPrefix}-animate-pause {
    animation-play-state:paused;
}

.#{$classPrefix}-notransition {
    transition: none !important;
}

// Animations

@keyframes shine-animate-fade-out {
    from   { opacity: 1; }
    to { opacity: 0; }
}

@keyframes shine-animate-fade-in {
    from   { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shine-animate-fade-in-up {
    from   {
        opacity: 0;
        transform: translateY(15px);
    }

    to { opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes shine-animate-fade-out-up {
    from   {
        opacity: 1;
        transform: translateY(15px);
    }

    to { opacity: 0;
        transform: translateY(0px);
    }
}

@keyframes shine-animate-blink {
    50% {
        opacity: 0.0;
    }
}

@keyframes shine-animate-shake {
    from {
        transform: rotate(13deg);
    }

    to {
       -webkit-transform-origin:center center;
       transform: rotate(-13deg);
    }
}