Logo Froglab Agenzia di Comunicazione

Tutorial: animare le media query

Scritto da francesco nella categoria   il giorno 7 Luglio 2021
Schermata di codice CSS

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)
Link alla pen qui sotto

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

Share