Как анимировать появление блока в media queries?

Question

[dhat]

А точнее, изменение цвета с красного на зеленый как анимировать? Поставил transition ко всему - не работает)))

codepen.io/dhatt/pen/eByypJ

Answer 1

[Ankhena]

У Вас нет изменения цвета с красного на зеленый.
Есть 2 блока, один красный, другой зеленый и у них меняется display. (Правда в Вашем коде появления красного блока я не добилась)
display не анимируется с помощью transition, только opacity, либо JS/JQ.

Comments

[dhat]

Opacity в моем случае не дает нужного эффекта. Красный блок появляется вместо зеленого при малом вьюпорт.

[Ankhena]

dhat: могу лишь повторить, изменения display не анимируются с помощью transition.

Да и не ясно зачем. В игры с изменением размера окна играют только разработчики, да клиенты в момент приемки работы.

[dhat]

Ankhena W: хм, вы меня раскусили) Я это как раз с этой целью и делал, эдакая пасхалка коллегам))

Answer 2

[Sergei Nazarenko]

https://css-tricks.com/snippets/css/keyframe-anima...

Comments

[dhat]

С помощью этого я смогу анимировать display? Выше сказали что его нельзя анимировать.

Answer 3

[gotohell]

с display transition не прокатит лучше меняйте цвет родителю .qqq
codepen.io/webmasterotboga/pen/GNyQWg

Comments

[dhat]

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