Мне нужно иметь две анимации в 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 останавливает анимацию и сохраняет ее полную непрозрачность

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

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

css hover css-animations

2

Prinzherbert 8 Июн 2019 в 20:47

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>

1

Temani Afif 8 Июн 2019 в 21:01

Answer 2

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

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

0

Zee 8 Июн 2019 в 18:00

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

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

css