помогите с плавной анимацией "hover", нужно чтобы плавно появлялось и пропадало

Рейтинг: 0Ответов: 2Опубликовано: 02.02.2023

.glaz {
  display: none;
  position: absolute;
  top: 60px;
  left: 50px;
}
    
.kartinka:hover + .glaz {
  display: block;
}
<body>
  <img class="kartinka" src="./wear1.jpg" alt="cloth" height="500px" />
  <img class="glaz" src="./ic_eye_product.svg" alt="glaz" />
</body>

css css-animation
Источник: Stack Overflow на русском

Ответы

▲ 1

скопирую свой же ответ из схожего вопроса:

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

если это цвет - то да, т.к. между двумя любыми цветами вычислимо промежуточное состояние.

если это text-decoration-line или, например, display - то нет. т.к. в природе не существует промежуточных состояний между их возможными значениями.

конкретно в вашем случае можно анимировать прозрачность у .glaz, но таким образом:

При наведении:

  1. исходная прозрачность: opacity:0; и время анимации transition-duration:0.5s.
  2. элементу при наведении делается display:block;
  3. ПОСЛЕ этого скрипт проставляет ему некий класс, у которого стоит opacity:1 - тогда УЖЕ ПОКАЗАННЫЙ элемент начинает приобретать непрозрачный вид плавно.

При убирании мышки все делается в обратном порядке - сначала элемент становится невидимым путем уменьшения Opacity до нуля, и лишь потом исчезает совсем с помощью проставления ему display:none.

Без яваскрипта вы такое не сделаете.

▲ 0

на display не работает transition, поэтому нужно делать через Opacity

.glaz {
  opacity: 0;
  position: absolute;
  top: 60px;
  left: 50px;
  transition: .3s;
}
    
.kartinka:hover + .glaz {
  opacity: 1;
}
<body>
  <img class="kartinka" src="./wear1.jpg" alt="cloth" height="500px" />
  <img class="glaz" src="./ic_eye_product.svg" alt="glaz" />
</body>