/**
* Define animation classes for the app
* The top section defines keyframes 
* The lower section defines class for this key froames
**/

/**
Set transitions for all 
**/

* {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/**
 * Define bounceIn for components 
**/

@keyframes bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/**
 * Define bounceOut for components 
**/

@keyframes bounceIn {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0.1);
    }
}

/**
 * 
 *
 **/

/** 
   * Linnear Movement horrizontal
   *
  **/

@keyframes lateralMoveVertical {
    0% {
        transform: translateY(0%);
        opacity: 0;
    }
    100% {
        transform: translateY(100%);
        opacity: 1;
    }
}

/** 
   * Linnear Movement Vetical
   *
  **/

@keyframes lateralMoveHorrizontal {
    0% {
        transform: translateX(0%);
        opacity: 0;
    }
    100% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/** 
   * Scales 
   *
  **/

@keyframes scaleExpand {
    0% {
        transform: scale(0%);
    }
    60% {
        transform: scale(110%);
    }
    100% {
        transform: scale(100%);
    }
}

/**
 * Cool veiw
 * Typically useful for implementing picutures comming in 
 **/

@keyframes imagebounceIn {
    0% {
        transform: scale(10%);
        transform: translateX(-20%);
        opacity: 0%;
    }
    40% {
        transform: scale(60%);
        transform: translateX(-10%);
        opacity: 1;
    }
    60% {
        transform: scale(110%);
        transform: translateX(-5%);
        opacity: 1;
    }
    100% {
        transform: scale(100%);
        opacity: 1;
        transform: translateX(0%);
    }
}

/**
 * Continous rotation 
 **/

@keyframes rotate {
    0% {
        transform: rotate(0turn);
    }
    100% {
        transform: rotate(1turn);
    }
}

@keyframes elevate {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translateZ(0.3);
    }
}

.bounceIn {
    animation: bounceIn 2s ease-in 1;
}

.bounceOut {
    animation: bounceOut 2s ease-in 1;
}

.lateralMoveHorrizontalInfinte {
    animation: lateralMoveHorrizontal 4s ease-in infinite;
}

.lateralMoveVerticalInfinte {
    animation: lateralMoveVertical 4s ease-in infinite;
}

.scaleExpand {
    animation: scaleExpand 0.4s ease-in 1;
}

.hoverExpand:hover {
    animation: scaleExpand, elevate 0.4s ease-in 1;
}

.rotate {
    animation: rotate 0.4s ease-in infinite;
}

.imageBounceIn {
    animation: imagebounceIn 4s ease-in 1;
}