Tutorial: animare le media query

Animare gli elementi della pagina al resize della finestra del browser è semplicissimo. Serve a qualcosa? No! Aumenta i tempi di caricamento? Assolutamente sì. È divertente? Of course!

In questo esempio ho animato il resize delle colonne di un eventuale layout:

<div class="main">
	<div class="sub sub1">
		foo
	</div>
	<div class="sub sub2">
		foo
	</div>
	<div class="sub sub3">
		foo
	</div>
</div>
<style>
* {
	transition: all .5s ease-in-out;
	box-sizing: border-box;
}
body {
	background-color: grey;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.main {
	border: 1px solid tomato;
	width: 300px;
	height: auto;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sub {
	background-color: darkseagreen;
	color: white;
	padding: 1rem;
	margin: .5rem 0;
	display: inline;
}
.sub1 {
	width: 100%;
}
.sub2, .sub3 {
	width: calc(50% - .5rem);
}
@media screen and (max-width:900px) {
	.sub {
		background-color: tomato;
	}
	.sub2, .sub3 {
		width: 100%;
	}
}
</style>
Code language: HTML, XML (xml)

Il selettore * seleziona tutti gli elementi all'interno del file. A questo o applicato una semplice transizione ease-in-out. Di conseguenza la parte che veramente interessa è:

* {
	transition: all .5s ease-in-out;
	box-sizing: border-box;
}
Code language: CSS (css)

See the Pen Animated media queries by Francesco (@Francesco_Maretti) on CodePen.