@@Hannes Weninger
ich hab mal dieses JSFiddle Beispiel gemacht: JSFiddle.
Zum Markup:
<div class="container">
<section class="main">
class="main"?? Zur Auszeichnung des Hauptinhalts dient das main-Element. [Spec]
Ein div-Container außenrum sollte nicht erforderlich sein, da es mit html und body bereits zwei solche gibt.
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Use what you have</h3>
Wofür sollen die div-Elemente gut sein, die gar nichts gruppieren?
Es sieht auch nicht so aus als wäre „Use what you have“ eine Überschrift.
Zum Stylesheet:
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
Die Vendor-Präfixe -moz-, -ms- und -o- sind unsinng. (Die letzten beiden waren es wohl schon immer.) Alle diese Browser unterstützen transition präfixfrei. Lediglich -webkit- könnte für alte Android-Browser noch sinnvoll sein.
Warum all, wenn nur die Änderung von transform animiert werden soll?
Die Animation der Änderung von box-shadow ist aus Performanz-Sicht nicht so eine gute Idee.
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
Ähnlich hier: -moz- und -o- sind unsinng.
-webkit-backface-visibility: hidden;
Die präfixfreie Angabe der backface-visibility-Eigenschaft fehlt.
LLAP 🖖
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)