/***** face in *****/
.fade-in {
    animation: fadeIn ease 0.5s;
    -webkit-animation: fadeIn ease 0.5s;
    -moz-animation: fadeIn ease 0.5s;
    -o-animation: fadeIn ease 0.5s;
    -ms-animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}  
@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

/***** face-out *****/
.fade-out {
    animation: fadeOut ease 1s;
    -webkit-animation: fadeOut ease 1s;
    -moz-animation: fadeOut ease 1s;
    -o-animation: fadeOut ease 1s;
    -ms-animation: fadeOut ease 1s;
}
@keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-webkit-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-o-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-ms-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}