.animate-enter { 
    -webkit-animation: enter 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
    animation: enter 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
    display: block;
    position: relative;
} 
@-webkit-keyframes enter {
    from {
        opacity: 0;
        height: 0px;
    }
    20% {
        opacity: .5;
    }
    40% {
        opacity: .15;        
        color: red;            }
    60% {
        opacity: .75;        
    }
    80% {
        opacity: .3;        
    }
    to {
        opacity: 1;
        height: 30px;
    }
}
@keyframes enter {
    from {
        opacity: 0;
        height: 0px;
    }
    20% {
        opacity: .5;
    }
    40% {
        opacity: .15;        
        color: red;            }
    60% {
        opacity: .75;        
    }
    80% {
        opacity: .3;        
    }
    to {
        opacity: 1;
        height: 30px;
    }
}
 
.animate-leave { 
    -webkit-animation: leave 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
    animation: leave 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000);
    display: block;
    position: relative;
} 
@-webkit-keyframes leave {
    to {
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: .25;
    }
    60% {
        opacity: .10;        
        color: red;            }
    40% {
        opacity: .5;        
    }
    20% {
        opacity: .30;        
    }
    from {
        opacity: 1;
        height: 30px;
    }
}
@keyframes leave {
    to {
        opacity: 0;
        height: 0px;
    }
    80% {
        opacity: .25;
    }
    60% {
        opacity: .10;        
        color: red;            }
    40% {
        opacity: .5;        
    }
    20% {
        opacity: .30;        
    }
    from {
        opacity: 1;
        height: 30px;
    }
}