How to animate block appearance in media queries?

Question

css

Or rather, how to animate the color change from red to green? Put transition to everything - doesn't work)))
codepen.io/dhatt/pen/eByypJ

Answer 1

You don't have a color change from red to green.
There are 2 blocks, one is red, the other is green, and their display changes. (Although I didn't achieve the appearance of the red block in your code)
display is not animated using transition, only opacity, or JS / JQ.

Answer 2

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

Answer 3

with display transition it will not work better change the color of the parent .qqq
codepen.io/webmasterotboga/pen/GNyQWg

Answer 4

you think right through media, and flexbox will help you, which will greatly simplify the layout

Answer 5

put the house in the background and two blocks, float:left and float:right, with indents from the edges,
and for the container itself, set the maximum and minimum width
https://jsfiddle.net/TGNC/7fjvznfd/1/