Мне нужно иметь две анимации в CSS, одна при запуске и одна при наведении, но она не работает

Question

У меня есть элемент div, который имеет анимацию для воспроизведения при запуске страницы.Я хочу, чтобы у него была другая анимация, чтобы играть, когда я нахожусь над ним.Он работает просто отлично, но когда я вытащил свою мышь из элемента div, он снова воспроизводит начальную анимацию (исчезает с экрана).

@keyframes div{
   0%{
     opacity: 0;
   }
}
@keyframes divHover{
   50%{
      top: 200px;
   }
   100%{
      top: 0px;
   }
}
#div{
   opacity: 1;
   animation: div 1s;
   position: absolute;
   left: 0px;
   top: 0px;
}
#div:hover{
   animation: divHover 1s linear 0s infinite;
}

   <div id="div"> abc </div>

Ожидается: Div запускается невидимыми исчезает. При наведении курсора на div, он поднимается и опускается и продолжает делать это во время зависания.После остановки наведения, div останавливает анимацию и сохраняет ее полную непрозрачность

Actual: После остановки наведения, div останавливает анимацию, но возвращается к 0 непрозрачности, затем требуется одна секунда, чтобы снова отобразить начальную анимацию.

https://jsfiddle.net/odq125Lu/6/

Answer 1

Проблема связана с тем, что вы переопределяете первую непрозрачность анимацию с вверх и вниз , а затем, когда вы снова активируете первый, вы снова активируете первую.

Вы можете использовать несколько анимаций и рассмотрите animation-play-state, чтобы активировать вторую:

@keyframes div {
  0% {
    opacity: 0;
  }
}

@keyframes divHover {
  50% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

#div {
  opacity: 1;
  animation: 
    div 1s,
    divHover 1s linear 0s infinite;
  animation-play-state:running,paused;
  position: absolute;
  left: 0px;
  top: 0px;
  background:red;
  padding:20px;
}

#div:hover {
  animation-play-state:running,running;
}

<div id="div"> abc </div>

Answer 2

Я не эксперт, но это может быть связано с тем, что вы не установили 100% -ное значение для анимации "divHover"?

@keyframes div{
   0%{
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
}