Как сделать обратную анимацию css

Обратная анимация 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 элемента, чтобы обратная анимация произошла только при наведении курсора мыши.