.effect-fade { opacity : 1; transform : translate(0, 0); transition : all 300ms; } 
.effect-fade.active{  opacity : 0; transform : translate(0, 45px); transition : all 300ms; }

.rotate_y.active {
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 1; }
.rotate_y { text-align:center; background-color: lightpink; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; -ms-transition: all 2s; transition: all 2s; transform: rotateY(360deg); }
.slide_left.active { background-color: lightpink; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; -webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); opacity: 0; }
.slide_right.active { background-color: lightpink; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; -webkit-transform: translate(+100%, 0); -moz-transform: translate(+100%, 0); -o-transform: translate(+100%, 0); -ms-transform: translate(+100%, 0); transform: translate(+100%, 0); opacity: 0; }
.slide_left, .slide_right { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; -webkit-transform: translate(0, 0); opacity:1; }
.shake { animation: shake 5.2s infinite; }
@keyframes shake {
    0% {transform: translate(0px, 0px) rotateZ(0deg) }
    2% { transform: translate(1px, 0px) rotateZ(1deg) }
    4% { transform: translate(0px, 0px) rotateZ(0deg) }
    6% { transform: translate(-1px, 0px) rotateZ(-1deg) }
    8% { transform: translate(0px, 0px) rotateZ(0deg) }
    10% { transform: translate(1px, 0px) rotateZ(1deg) }
    12% { transform: translate(0px, 0px) rotateZ(0deg) }
    14% { transform: translate(-1px, 0px) rotateZ(-1deg) }
    16% { transform: translate(0px, 0px) rotateZ(0deg) }
    18% { transform: translate(0px, 0px) rotateZ(0deg) }
    100% { transform: translate(0px, 0px) rotateZ(0deg) }
}