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.
Share