.yoyo-enter { 
    -webkit-animation: yoyoenter 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    animation: yoyoenter 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    display: block;
    position: relative;
} 
@-webkit-keyframes yoyoenter {
    from {
        opacity: 0;
        height: 0px;
        right: -70px;
    }
    75% {
        right: 15px;
    }
    to {
        opacity: 1;
        height: 30px;
        right: 0px;
    }
}
@keyframes enter {
    from {
        opacity: 0;
        height: 0px;
        right: -70px;
    }
    75% {
        right: 15px;
    }
    to {
        opacity: 1;
        height: 30px;
        right: 0px;
    }
}
 
.yoyo-leave { 
    -webkit-animation: yoyoleave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    animation: yoyoleave 600ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    display: block;
    position: relative;
} 
@-webkit-keyframes yoyoleave {
    to {
        opacity: 0;
        height: 0px;
        right: -70px;
    }
    25% {
        right: 15px;
    }
    from {
        opacity: 1;
        height: 30px;
        right: 0px;
    }
}
@keyframes leave {
    to {
        opacity: 0;
        height: 0px;
        right: -70px;
    }
    25% {
        right: 15px;
    }
    from {
        opacity: 1;
        height: 30px;
        right: 0px;
    }
}