React fade in and fade out with pure css - css

Question

I am new to React. I have a small app with a login button. When I click the login button and a error from the backend is triggered, a toast error message is rendered. I want to show a animation fade-in and fade out from bottom to top. Only the fade in animation for the toast message is currently working. But how can i trigger a fade out animation?
the errorMessage comes from the redux mapStateToProps function. The clearAuthErrorAction is an action, it will delete the error message from the redux state.
<AuthenticationAlert errorMessage={errorMessage}>
{setTimeout(() => clearAuthErrorAction(), 3000)}
</AuthenticationAlert>
.toast__container {
...
animation: slideInTop 0.5s linear;
}
#keyframes slideInTop {
0% {
transform: translateY(-1.5rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideInBottom {
0% {
transform: translateY(1.5rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
The solution was simple. I adjusted the animation in CSS a little bit.
#keyframes slideInTop {
0% {
transform: translateY(-3rem);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-20rem);
opacity: 0;
}
}