Как правильно задавать @keyframes-анимацию при появление и скрытие элемента?

Question

[Михаил Р.]

Приветствую!

Написал выпадающий drodown блок при наведение на его родителя. Далее создал @keyframes-анимацию и прикрутил ее к блоку.

Проблема: анимация появления drodown работает исправно, но вот анимация скрытия drodown не работает.

Подскажите пожалуйста, как в моем случае лучше всего прикрутить анимацию?

Спасибо!

Answer 1

[Дима Долготер]

Тут не надо Keyframes тут надо transition.

.dropdown__container {
   background-color: lightgray;
  padding: 1em;
       transform: translateY(50px);
  will-change: transform;  //шоб плавнее было
    opacity: 0; transition:transform .3s,opacity .3s;
  
}

.dropdown:hover > .dropdown__container {
  will-change: transform;  
   transition:transform .3s,opacity .3s;
  transform: translateY(0px);
   opacity: 1;
 }

а кейфреймс удали

Comments

[Михаил Р.]

А через @keyframes это реально реализовать?

[Дима Долготер]

Mike Ro, да. но и на руках реально ходить