.slidein {
        float:right;

        animation-duration: 1s;
        animation-name: slidein;
    }

@keyframes slidein {
    from {
        margin-right: 30%;
    }
    to {
        margin-left: 0%;
    }

   
}


.fade-in {
    opacity: 0;
    transition: opacity;
    transition-duration: 2s;
    transition-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
  
  .fade-in.fade {
    opacity: 1;
  }

.from-left {
 
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}

.from-right {

 -webkit-transform: translateX(50%);
 transform: translateX(50%);
}

.from-left,
.from-right {
 transition: opacity 250ms ease-in, -webkit-transform1s ease-in;
 transition: opacity 250ms ease-in, transform 1s ease-in;
 transition: opacity 250ms ease-in, transform 1s ease-in,
   -webkit-transform 1s ease-in;
 opacity: 0;
}

.from-left.appear,
.from-right.appear {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}


.active{
    color:gray;
}