/*-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-fill-mode: both;animation-fill-mode:both;*/
/*=== note==Add code trên vào element cần fade ========================*/


/*=============== css  fade left ====================================*/
@-webkit-keyframes fadeInLeft {
    0% {opacity:0;-webkit-transform:translateX(-50px);}
    100% {opacity:1;-webkit-transform:translateX(0);}
}
         
@keyframes fadeInLeft {
    0% {opacity:0;transform:translateX(-50px);}
    100% {opacity:1;transform: translateX(0);}
}
         
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;}
/*=============== css  fade right ====================================*/
@-webkit-keyframes fadeInRight {
    0% {opacity:0;-webkit-transform:translateX(50px);}
    100% {opacity:1;-webkit-transform:translateX(0);}
}
         
@keyframes fadeInRight {
    0% {opacity:0;transform:translateX(50px);}
    100% {opacity:1;transform: translateX(0);}
}
         
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;} 
/*=============== css  fade up ====================================*/
@-webkit-keyframes fadeInUp {
    0% {opacity:0;-webkit-transform:translateY(-50px);}
    100% {opacity:1;-webkit-transform:translateY(0);}
}
         
@keyframes fadeInUp {
    0% {opacity:0;transform:translateY(-50px);}
    100% {opacity:1;transform: translateY(0);}
}
         
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;} 
/*=============== css  fade down ====================================*/
@-webkit-keyframes fadeInDown {
    0% {opacity:0;-webkit-transform:translateY(50px);}
    100% {opacity:1;-webkit-transform:translateY(0);}
}
         
@keyframes fadeInDown {
    0% {opacity:0;transform:translateY(50px);}
    100% {opacity:1;transform: translateY(0);}
}
         
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;}

/*==========================lien.le=========================*/

/*=============== css  fade in ====================================*/
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
         
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;}
/*=============== css  fade in ====================================*/

.fadeIn-element {opacity: 0;animation: fadeIn 5s forwards;}

    .fadeInLeft-element:nth-child(1) {animation-delay: 4s;}

    .fadeInLeft-element:nth-child(2) {animation-delay: 4.5s;}

    .fadeInLeft-element:nth-child(3) {animation-delay: 5s;}

    .fadeInLeft-element:nth-child(4) {animation-delay: 5.5s;}

    .fadeInLeft-element:nth-child(5) {animation-delay: 7s;}

    .fadeInLeft-element:nth-child(6) {animation-delay: 5.5s;}

/*=============== css  fade left ====================================*/

.fadeInLeft-element {opacity: 0;animation: fadeInLeft 1s forwards;}

    .fadeInLeft-element:nth-child(1) {animation-delay: 0s;}

    .fadeInLeft-element:nth-child(2) {animation-delay: 0.5s;}

    .fadeInLeft-element:nth-child(3) {animation-delay: 1s;}

    .fadeInLeft-element:nth-child(4) {animation-delay: 1.5s;}

    .fadeInLeft-element:nth-child(5) {animation-delay: 2s;}

    .fadeInLeft-element:nth-child(6) {animation-delay: 2.5s;}

/*==========================lien.le=========================*/
.fadeInRight-element {opacity: 0;animation: fadeInRight 1s forwards;}

    .fadeInLeft-element:nth-child(1) {animation-delay: 0s;}

    .fadeInLeft-element:nth-child(2) {animation-delay: 0.5s;}

    .fadeInLeft-element:nth-child(3) {animation-delay: 1s;}

    .fadeInLeft-element:nth-child(4) {animation-delay: 1.5s;}

    .fadeInLeft-element:nth-child(5) {animation-delay: 2s;}

    .fadeInLeft-element:nth-child(6) {animation-delay: 2.5s;}
    
/*==========================lien.le=========================*/
.fadeInUp-element {opacity: 0;animation: fadeInUp 1s forwards;}

    .fadeInLeft-element:nth-child(1) {animation-delay: 0s;}

    .fadeInLeft-element:nth-child(2) {animation-delay: 0.5s;}

    .fadeInLeft-element:nth-child(3) {animation-delay: 1s;}

    .fadeInLeft-element:nth-child(4) {animation-delay: 1.5s;}

    .fadeInLeft-element:nth-child(5) {animation-delay: 2s;}

    .fadeInLeft-element:nth-child(6) {animation-delay: 2.5s;}
   
/*==========================lien.le=========================*/
.fadeInDown-element {opacity: 0;animation: fadeInDown 1s forwards;}

    .fadeInLeft-element:nth-child(1) {animation-delay: 0s;}

    .fadeInLeft-element:nth-child(2) {animation-delay: 0.5s;}

    .fadeInLeft-element:nth-child(3) {animation-delay: 1s;}

    .fadeInLeft-element:nth-child(4) {animation-delay: 1.5s;}

    .fadeInLeft-element:nth-child(5) {animation-delay: 2s;}

    .fadeInLeft-element:nth-child(6) {animation-delay: 2.5s;}