Обратная анимация CSS — это анимация, которая происходит в обратном порядке после завершения основной анимации. Для создания обратной анимации можно использовать свойство «animation-direction» со значением «reverse». Ниже приведен пример CSS-кода, который создает обратную анимацию:
.box {
width: 100px;
height: 100px;
background-color: red;
animation: animate 2s forwards;
}
@keyframes animate {
0% { opacity: 0; }
100% { opacity: 1; }
}
.box:hover {
animation-direction: reverse;
}В этом примере создается прямая анимация, которая придает элементу с классом «box» анимационный эффект появления. После запуска анимации, при наведении курсора мыши на элемент «box», анимация начнется в обратном направлении, то есть элемент начнет исчезать до того, как станет полностью невидимым. Обратите внимание, что свойство «animation-direction» должно быть задано для селектора :hover элемента, чтобы обратная анимация произошла только при наведении курсора мыши.
