/*------------------------------------------------------------------
    Project:        HTML Element Loading Animation
    Version:        1.0.1
    Last change:    10/08/18
    Author:         Klaus Brandner

    [CSS STRUCTURE]
    * Load Animation Class / .aco-load-animation
        + Grow Animation Class / .aco-load-animation.aco-grow.is-visible
        + Shrink Animation Class / .aco-load-animation.aco-shrink.is-visible
        + Slide Up Animation Class / .aco-load-animation.aco-slide-up.is-visible
        + Slide Right Animation Class / .aco-load-animation.aco-slide-right.is-visible
        + Slide Down Animation Class / .aco-load-animation.aco-slide-down.is-visible
        + Slide Left Animation Class / .aco-load-animation.aco-slide-left.is-visible
        + Unfold Animation Class / .aco-load-animation.aco-unfold.is-visible

    * Grow Keyframe Animation / AcoGrowAnimation
    * Shrink Keyframe Animation / AcoShrinkAnimation
    * Slide Up Keyframe Animation / AcoSlideUpAnimation
    * Slide Right Keyframe Animation / AcoSlideRightAnimation
    * Slide Down Keyframe Animation / AcoSlideDownAnimation
    * Slide Left Keyframe Animation / AcoSlideLeftAnimation
    * Unfold Keyframe Animation / AcoUnfoldAnimation 

    -------------------------------------------------------------------*/

.aco-load-animation{
    opacity: 0;
}
.aco-load-animation.is-visible{
    opacity: 1;
}

/**
 * You can change the duration and easing of each animation here
 */
.aco-load-animation.aco-grow.is-visible{
    animation: AcoGrowAnimation 600ms ease-in;
}
.aco-load-animation.aco-shrink.is-visible{
    animation: AcoShrinkAnimation 600ms ease-in;
}
.aco-load-animation.aco-slide-up.is-visible{
    animation: AcoSlideUpAnimation 400ms ease-out;
}
.aco-load-animation.aco-slide-right.is-visible{
    animation: AcoSlideRightAnimation 400ms ease-out;
}
.aco-load-animation.aco-slide-down.is-visible{
    animation: AcoSlideDownAnimation 400ms ease-out;
}
.aco-load-animation.aco-slide-left.is-visible{
    animation: AcoSlideLeftAnimation 400ms ease-out;
}
.aco-load-animation.aco-unfold.is-visible{
    animation: AcoUnfoldAnimation 600ms ease-in;
}


/**
 * The keyframe animations
 */
@keyframes AcoGrowAnimation{
    0% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes AcoShrinkAnimation{
    0% {
        opacity: 0;
        transform: scale(2);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes AcoSlideUpAnimation{
    from {
        opacity: 0;
        transform: translate(0,50px);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

@keyframes AcoSlideRightAnimation{
    from {
        opacity: 0;
        transform: translate(-50px,0);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

@keyframes AcoSlideDownAnimation{
    from {
        opacity: 0;
        transform: translate(0,-50px);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

@keyframes AcoSlideLeftAnimation{
    from {
        opacity: 0;
        transform: translate(50px,0);
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

@keyframes AcoUnfoldAnimation{
    0% {
        transform: rotateY(-90deg);
    }
    60% {
        transform: rotateY(20deg);
    }
    100% {
        transform: rotateY(0);
    }
}