@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}

@keyframes fadeOut {

    from { opacity: 1; }

    to { opacity: 0; }

}

@-webkit-keyframes fadeIn {

       from { opacity: 0; }

       to { opacity: 1; }

   }

@-webkit-keyframes fadeOut {

       from { opacity: 1; }

       to { opacity: 0; }

         }

.fadeIn{
animation: fadeIn;
animation-duration: 0.5s;
}

.fadeOut{
animation: fadeOut;
animation-duration: 0.5s;
}