.scIn{
   position: relative;
}
.fadeIn{
    opacity:0;
    -webkit-opacity:0;
}

.fadeIn.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-timing-function: ease;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    -webkit-animation-timing-function: ease;
}

@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@-webkit-keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}





.slideInTop{
    opacity:0;
    -webkit-opacity:0;
}

.slideInTop.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: slideInTop;
    animation-timing-function: ease;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: slideInTop;
    -webkit-animation-timing-function: ease;
}

@keyframes slideInTop{
    0%{
        opacity:0;
        top:-30px;
    }
    100%{
        opacity:1;
        top:0px;
    }
}


@-webkit-keyframes slideInTop{
    0%{
        opacity:0;
        top:-30px;
    }
    100%{
        opacity:1;
        top:0px;
    }
}








.slideInBottom{
    opacity:0;
    -webkit-opacity:0;
}

.slideInBottom.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: slideInBottom;
    animation-timing-function: ease;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: slideInBottom;
    -webkit-animation-timing-function: ease;
}

@keyframes slideInBottom{
    0%{
        opacity:0;
        top:30px;
    }
    100%{
        opacity:1;
        top:0px;
    }
}

@-webkit-keyframes slideInBottom{
    0%{
        opacity:0;
        top:30px;
    }
    100%{
        opacity:1;
        top:0px;
    }
}



.slideInLeft{
    opacity:0;
    -webkit-opacity:0;
}

.slideInLeft.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: slideInLeft;
    animation-timing-function: ease;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: slideInLeft;
    -webkit-animation-timing-function: ease;
}

@keyframes slideInLeft{
    0%{
        opacity:0;
        left:-30px;
    }
    100%{
        opacity:1;
        left:0px;
    }
}

@-webkit-keyframes slideInLeft{
    0%{
        opacity:0;
        left:-30px;
    }
    100%{
        opacity:1;
        left:0px;
    }
}



.slideInRight{
    opacity:0;
    -webkit-opacity:0;
}

.slideInRight.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: slideInRight;
    animation-timing-function: ease;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: slideInRight;
    -webkit-animation-timing-function: ease;
}

@keyframes slideInRight{
    0%{
        opacity:0;
        left:30px;
    }
    100%{
        opacity:1;
        left:0px;
    }
}

@-webkit-keyframes slideInRight{
    0%{
        -webkit-opacity:0;
        left:30px;
    }
    100%{
        -webkit-opacity:1;
        left:0px;
    }
}



.slideInZoom{
    transform: scale(0);
    -webkit-transform: scale(0);
}

.slideInZoom.move{
    animation-duration: 400ms;
    animation-fill-mode: both;
    animation-name: slideInZoom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);;
    -webkit-animation-duration: 400ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: slideInZoom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);;
}

@keyframes slideInZoom{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

@-webkit-keyframes slideInZoom{
    0%{
        -webkit-transform: scale(0);
    }
    100%{
        -webkit-transform: scale(1);
    }
}