Animierte Media Queries

Wenn Sie eine Transition auf ein Element für eine bestimmte unterstützte Eigenschaft anwenden und sich diese Eigenschaft *jemals* ändert, wird diese Transition verwendet. Wenn sich ein Klassenname auf diesem Element ändert und die neue Klasse diese Eigenschaft ändert, wird eine Transition durchgeführt (vorausgesetzt, was die Klasse tut, entfernt nicht die Transition). Wenn JavaScript die Stil-Eigenschaft buchstäblich ändert, wird eine Transition durchgeführt.

Ebenso, wenn eine neue Media Query wirksam wird und diese Media Query etwas enthält, das diese Eigenschaft auf diesem Element ändert, wird eine Transition durchgeführt. Daher gibt es eigentlich keine „animierte Media Query“ an sich, sondern vielmehr Elemente, die einfach wie erwartet animiert werden, wenn eine neue Media Query beginnt, die Seite zu beeinflussen.

Einfaches Beispiel

.thing-that-moves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  transition: left 0.5s; /* BYO prefixes */
}
@media (min-width: 400px) {
  left: 50px;
}
@media (min-width: 600px) {
  left: 100px;
}

Wenn Sie die Größe Ihres Browserfensters über diese Breakpoints hinaus ändern würden, würden Sie einen roten Quadrat sehen, der sich als Reaktion darauf bewegt.

Etwas komplexeres Layout-Beispiel

Vor einigen Versionen auf CSS-Tricks hatte ich ein Suchformular, das sich mit dieser genauen Technik langsam in Position schwebte. Ich habe es hier in einem etwas einfachen Layout neu erstellt, in dem sich auch einige andere Dinge animieren.

Sehen Sie den Pen Animierte Media Queries von Chris Coyier (@chriscoyier) auf CodePen

Sie haben möglicherweise die besten Ergebnisse, wenn Sie es in der Vollbildansicht ausprobieren.

Animiertes GIF davon, wie es funktioniert

PS. LICEcap ist sehr nützlich, um solche GIFs zu erstellen.

Was kann ich noch tun?

Der Himmel ist die Grenze. Das ist nur CSS. Ändern und animieren Sie, was Sie wollen. In einer anderen Version von CSS-Tricks habe ich Mike den Frosch von Treehouse aus einfachen CSS-Formen gezeichnet. Wenn verschiedene Media Queries erreicht wurden, würde Mike die Form, Farbe, Ausdruck und Position ändern – sich langsam in den nächsten Zustand verwandeln durch Übergänge. Das kam gut an!

Was ist die Browserunterstützung?

IE 9+ für Media Queries. IE 10+ für Transitions. Ich würde mir wegen der Transitions keine Sorgen machen, da sie streng genommen nur "funcandy" sind (wenn sie nicht animiert werden, spielt das keine Rolle, sie bewegen sich trotzdem). Wenn Sie eine tiefere Unterstützung für Media Queries benötigen, gibt es immer Respond.js.

Gibt es einen tatsächlichen Grund dafür?

Zum Spaß. Das ist rein zum Vergnügen. Es kann eine kleine Geste sein, um Ihrer Website etwas Leben einzuhauchen. Es wäre schwierig, einen geschäftlichen Fall dafür zu machen, aber wenn Ihr Performance-Budget nicht ein paar Bytes für Spaß übrig hat, tut es mir leid für Sie, mein Freund.

Gibt es etwas zu beachten?

Wenn die Stylesheet schnell genug geparst wird und die Übergänge auf ein Element angewendet werden, während die Seite noch im Layout ist, können diese Übergänge ziemlich aufdringlich sein. Sie möchten sie vielleicht erst nach dem Laden der Seite anwenden.