В настоящее время я не понимаю, почему мои анимации работают только в одном направлении.
Я разместил весь пример здесь в Интернете .
Все работает нормально, если я использую два ключевых кадра:
.show {
animation: showMe 0.4s;
}
.hide {
opacity: 0;
margin-top: -80px;
animation: hideMe 0.3s;
}
@keyframes hideMe {
0% {
opacity: 1;
margin-top: 20px;
}
100% {
opacity: 0;
margin-top: -80px;
}
}
@keyframes showMe {
0% {
opacity: 0;
margin-top: -80px;
}
100% {
opacity: 1;
margin-top: 20px;
}
}
Но я Я подумал, что это также должно работать с .show, если я повторно использую hideMe в направлении reverse, что-то вроде
.show {
animation: hideMe 0.4s reverse;
}
вместо
.show {
animation: showMe 0.4s;
}
Я неправильно понял концепцию?