Как задать выполнение анимации?

Question

[Никита Souvel]

Подскажите, как можно задать выполнение анимации при смене display: block, display: none и наоборот. Либо же если необходимо, можно менять класс, например active. Именно чтобы своя произвольная анимация, которая пишется в @keyframes.

Comments

[Сергей Горячев]

Не совсем понятно, как при display none вы планируете выполнение анимации.

[copal]

задать свойство transition: display 1s, но предварительно посмотреть можно ли вообще анимировать свойство display. И если нет, то только имитировать при помощи свойства трансформации, которое точно анимируется.

[HamSter]

copal: нельзя анимировать display: block, display: none

[Никита Souvel]

Да я знаю что нельзя анимировать именно дисплей none и блок, этим я хотел лишь показать сам факт что меняется факт видимости элемента и не просто так дописал, что возможно добавление класса

Answer 1

[HamSter]

display: block, display: none не анимируется, оно заменяется на

div {
  opacity: 0;
  visibility: hidden;
}
div.amimation {
  opacity: 1;
  visibility: visible;
}

Либо различные другие альтернативы, к примеру transformation: scale(0); transformation: scale(1);

Answer 2

[Stalker_RED]

1. Посмотреть список свойств, которые можно анимировать при помощи transition.
2. Убедиться, что свойство display не анимируется. (Бонусное задание: попробуйте понять почему. Как его вообще можно анимировать, по вашему?)
3. Придумать какую-то замену для вашей анимации. К примеру менять прозрачность (opacity) или высоту блока (height).

Comments

[Никита Souvel]

Чтобы ответить на вопрос:
1) Прочитать внимательно вопрос.
2) Убедиться, что точно правильно прочитали вопрос. (Бонусное задание: Увидеть слова после "Либо же")
3) Ответить на вопрос, если знаете.

[Stalker_RED]

Никита Souvel: Слова "либо же" и "класс" не помогут вам анимировать свойство display.
Парочку альтернатив я предложил в пункте №3. (Конечно, можно придумать и другие способы).
Если вы ожидаете, что кто-то прочтет ваши мысли и угадает что именно вам нужно, то мне жаль.