/*================================
    Element Animation-Collection
  ================================*/


/*================================
              1.fade in
  ================================*/
.effect-fade-in {
    opacity: 1;
    -webkit-animation: animation-fadein 4s ease 0s 1;
    -moz-animation: animation-fadein 4s ease 0s 1;
    -ms-animation: animation-fadein 4s ease 0s 1;
    -o-animation: animation-fadein 4s ease 0s 1;
    animation: animation-fadein 4s ease 0s 1;   
    /*last mode*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode:forwards; 
}
@keyframes animation-fade-in {
    0% {
        opacity: 1;/*process:start*/
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0; /*process:over*/
    }
}
/*================================
              2.fade out
  ================================*/
.effect-fade-out {
    opacity: 0;
    -webkit-animation: animation-fade-out 4s ease 0s forwards;
    -moz-animation: animation-fade-out 4s ease 0s forwards;    
    -ms-animation: animation-fade-out 4s ease 0s forwards;
    -o-animation: animation-fade-out 4s ease 0s forwards;    
    animation: animation-fade-out 4s ease 0s forwards;     
}
@keyframes animation-fade-out {
    0% {
        opacity: 0;/*process:start*/
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1; /*process:over*/
    }
}
/*================================
            3.float left
  ================================*/
.effect-float-left {
    -webkit-animation: animation-float-left 2s ease 0s 1;
    -moz-animation: animation-float-left 2s ease 0s 1;
    -ms-animation: animation-float-left 2s ease 0s 1;
    -o-animation: animation-float-left 2s ease 0s 1;
    animation: animation-float-left 2s ease 0s 1;
    /*last mode*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;    
    animation-fill-mode:forwards;
}
@keyframes animation-float-left {
    0% {
        transform:translateX(0vw);
    }
    50% {
        transform:translateX(.8vw);
    }
    100% {
        transform:translateX(0vw);
    }
}
/*================================
            4.float right
  ================================*/
.effect-float-right {
    -webkit-animation: animation-float-right 2s ease 0s 1;
    -moz-animation: animation-float-right 2s ease 0s 1;
    -ms-animation: animation-float-right 2s ease 0s 1;
    -o-animation: animation-float-right 2s ease 0s 1;    
    animation: animation-float-right 2s ease 0s 1;
    /*last mode*/
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;  
    -o-animation-fill-mode: forwards;  
    animation-fill-mode:forwards;
}
@keyframes animation-float-right {
    0% {
        transform:translateX(0vw);
    }
    50% {
        transform:translateX(-.8vw);
    }
    100% {
        transform:translateX(0vw);
    }
}
/*================================
            5.float up
  ================================*/
.effect-float-up {
    -webkit-animation: animation-float-up 2s ease 0s 1;
    -moz-animation: animation-float-up 2s ease 0s 1;
    -ms-animation: animation-float-up 2s ease 0s 1;
    -o-animation: animation-float-up 2s ease 0s 1;    
    animation: animation-float-up 2s ease 0s 1;
}
@keyframes animation-float-up {
    0% {
        transform:translateY(150px);
        opacity: 0;
    }
    100% {
        transform:translateY(0);
        opacity: 1;
    }
}
/*================================
            6.float down
  ================================*/
.effect-float-down {
    -webkit-animation: animation-float-down 2s ease 0s 1;
    -moz-animation: animation-float-down 2s ease 0s 1;
    -ms-animation: animation-float-down 2s ease 0s 1;
    -o-animation: animation-float-down 2s ease 0s 1;
    animation: animation-float-down 2s ease 0s 1;
}
@keyframes animation-float-down {
    0% {
        transform:translateY(0);
        opacity: 0;
    }
    100% {
        transform:translateY(150px);
        opacity: 1;
    }
}
/*================================
            7.box unfold
  ================================*/
  .effect-box-unfold {
    -webkit-animation: animation-box-unfold 1s ease 0s 1;
    -moz-animation: animation-box-unfold 1s ease 0s 1;    
    -ms-animation: animation-box-unfold 1s ease 0s 1;
    -o-animation: animation-box-unfold 1s ease 0s 1;
    animation: animation-box-unfold 1s ease 0s 1;
}
@keyframes animation-box-unfold {
    0% {
        transform:scale(0.8);
        opacity: 0;
    }
    100% {
        transform:scale(1);
        opacity: 1;
    }
}
/*================================
            8.drop-down
  ================================*/
.effect-drop-down {
    height: 0px;
    -webkit-animation: animation-drop-down 1s ease 0s 1;
    -moz-animation: animation-drop-down 1s ease 0s 1;
    -ms-animation: animation-drop-down 1s ease 0s 1;
    -o-animation: animation-drop-down 1s ease 0s 1;
    animation: animation-drop-down 1s ease 0s 1;
}
@keyframes animation-drop-down {
    0% {
        height: 0px;
    }
    100% {
        height: 100px;
    }
}
/*================================
             9.drop-up
  ================================*/
.effect-drop-up {
    height: 100px;
    -webkit-animation: animation-up-down 1s ease 0s 1;
    -moz-animation: animation-up-down 1s ease 0s 1;
    -ms-animation: animation-up-down 1s ease 0s 1;
    -o-animation: animation-up-down 1s ease 0s 1;
    animation: animation-up-down 1s ease 0s 1;
}
@keyframes animation-drop-up {
    0% {
        height: 100px;
    }
    100% {
        height: 0px;
    }
}

/*================================
            10. rotateX 360
  ================================*/
.effect-rotateX-360 {
    -webkit-animation: animation-rotateX-360 1s ease 0s 1;
    -moz-animation: animation-rotateX-360 1s ease 0s 1;    
    -ms-animation: animation-rotateX-360 1s ease 0s 1;
    -o-animation: animation-rotateX-360 1s ease 0s 1;
    animation: animation-rotateX-360 1s ease 0s 1;
}
@keyframes animation-rotateX-360 {
    0% {
        transform:rotateX(3.142rad);
        opacity: 0;
    }
    100% {
        transform:rotateX(0);
        opacity: 1;
    }
}

/*================================
            11. blur
  ================================*/
  .effect-blur {
    -webkit-animation: animation-blur 2s ease 0s 1;
    -moz-animation: animation-blur 2s ease 0s 1;    
    -ms-animation: animation-blur 2s ease 0s 1;
    -o-animation: animation-blur 2s ease 0s 1;
    animation: animation-blur 2s ease 0s 1;
}
@keyframes animation-blur {
    0% {
        filter: blur(1.5rem);
    }
    100% {
        filter: blur(0);
    }
}