

/*
=============================================================
UI KIT ANIMATION Style
=============================================================
*/

[class*='uk-animation-'] {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.uk-animation-reverse {
    animation-direction: reverse;
    animation-timing-function: ease-in;
}

.uk-animation-fade {
    animation-name: uk-fade;
    animation-duration: 0.8s;
    animation-timing-function: linear;
}

.uk-animation-scale-up {
    animation-name: uk-fade-scale-02;
}

.uk-animation-scale-down {
    animation-name: uk-fade-scale-18;
}

.uk-animation-slide-top {
    animation-name: uk-fade-top;
}

.uk-animation-slide-bottom {
    animation-name: uk-fade-bottom;
}

.uk-animation-slide-left {
    animation-name: uk-fade-left;
}

.uk-animation-slide-right {
    animation-name: uk-fade-right;
}

.uk-animation-slide-top-small {
    animation-name: uk-fade-top-small;
}

.uk-animation-slide-bottom-small {
    animation-name: uk-fade-bottom-small;
}

.uk-animation-slide-left-small {
    animation-name: uk-fade-left-small;
}

.uk-animation-slide-right-small {
    animation-name: uk-fade-right-small;
}

.uk-animation-slide-top-medium {
    animation-name: uk-fade-top-medium;
}

.uk-animation-slide-bottom-medium {
    animation-name: uk-fade-bottom-medium;
}

.uk-animation-slide-left-medium {
    animation-name: uk-fade-left-medium;
}

.uk-animation-slide-right-medium {
    animation-name: uk-fade-right-medium;
}

.uk-animation-kenburns {
    animation-name: uk-scale-kenburns;
    animation-duration: 15s;
}

.uk-animation-shake {
    animation-name: uk-shake;
}

.uk-animation-fast {
    animation-duration: 0.1s;
}

.uk-animation-toggle:not(:hover):not(.uk-hover) [class*='uk-animation-'] {
    animation-name: none;
}

/* Keyframes used by animation classes
 ========================================================================== */

@keyframes uk-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*
 * Slide Top
 */

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Bottom
 */

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Left
 */

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Slide Right
 */

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Slide Top Small
 */

@keyframes uk-fade-top-small {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Bottom Small
 */

@keyframes uk-fade-bottom-small {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Left Small
 */

@keyframes uk-fade-left-small {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Slide Right Small
 */

@keyframes uk-fade-right-small {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Slide Top Medium
 */

@keyframes uk-fade-top-medium {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Bottom Medium
 */

@keyframes uk-fade-bottom-medium {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Slide Left Medium
 */

@keyframes uk-fade-left-medium {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Slide Right Medium
 */

@keyframes uk-fade-right-medium {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Scale Up
 */

@keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale Down
 */

@keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Kenburns
 */

@keyframes uk-scale-kenburns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

/*
 * Shake
 */

@keyframes uk-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-9px);
    }
    20% {
        transform: translateX(8px);
    }
    30% {
        transform: translateX(-7px);
    }
    40% {
        transform: translateX(6px);
    }
    50% {
        transform: translateX(-5px);
    }
    60% {
        transform: translateX(4px);
    }
    70% {
        transform: translateX(-3px);
    }
    80% {
        transform: translateX(2px);
    }
    90% {
        transform: translateX(-1px);
    }
}
