CSS3-Transitions

Seit CSS3 bietet die Stylesheet-Sprache die Möglichkeit von Überblendungen von CSS-Eigenschaften, wenn sich dieser beispielsweise durch einem Mouseover ändert oder per Javascript geändert wird.
Dabei wird der Übergang vom Startwert zum Zielwert über eine Zeitspanne interpoliert, es entsteht eine Animation.
Für das Erstellen von CSS-Transitions, müssen zwei Werte angegeben werden: Die Dauer für den Übergang und das CSS-Property auf die die Transition angewandt werden soll.

.element {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

 
Der Übergangs-Effekt wird gestartet, sobald sich der Wert ändert.

.element:hover {
  width: 300px;
}

 
Es ist auch möglich, einen transition-Effekt für mehrere Werte anzugeben.

.element {
  transition: width 2s, height 4s;
}

 
Setzt man für transition-property den Wert all, werden Transitions für alle möglichen Werte definiert.

.element {
  transition: all 2s;
}

 

Parameter

 

transitiv Eine Abkürzung für alle Parameter
transition-delay Gibt in Millisekunden (ohne Angabe, z. B. 500) an, wie lange es dauert bis die Animation nach der Änderung des Wertes startet. . Es können auch Sekunden angegeben werden (z. B. 0.5s)
transition-duration Legt fest, wie lange die Animation in Millisekunden dauert.
transition-property Definiert, für welche CSS-Eigenschaften Transitions erstellt werden.
transition-timing-function Über diese Angabe, kann das Timing der Animation festgelegt werden.

 

Delay

Über transition-delay erhält die Transition eine Verzögerung, d.h. die Animation startet entsprechend später.
Hier zum Vergleich eine Demo zu transition-delay.

 

Timing

Das Timing bestimmt, die Funktion, mit der die Werte interpoliert werden. Dadurch kann man die Dynamik der Transition beeinflussen. Hier die Werte für die Timing-Funktion:

linear Lineare Interpolation, d.h. der Übergang geht mit gleichbleibender Geschwindigkeit von statten. Dies wirkt in der Praxis sehr mechanisch und unnatürlich.
ease langsamer Start, schneller und langsames Ende. Dies ist die dynamischste der vorgegebenen Funktionen. Der Übergang wirkt dynamisch und natürlich. Dies wird standardmäßig verwendet.
ease-in Langsamer Start.
ease-out Langsames Ende
esse-in-out Wie ease, nur etwas gleichmäßiger. Wirkt natürlich, aber gleichmäßiger als ease.
cubic-bezier(n,n,n,n) Mit diesem Wert kann kubische Bezier-Funktionen verwenden, um das Timing zu definieren. Damit lassen sich beispielsweise Bounce-Effekte erzielen.

 
Hier eine kurze Demo der einzelnen Timingfunktionen im Vergleich:

Probleme

 
Leider kann man Transitions mit dem Wert auto nicht vernünftig einsetzen. In der Praxis würde man dies beispielsweise für einen Akkordion-Effekt verwenden, bei der der Inhalt der einzelnen Container variabel ist. Leider ist die Implementierung nicht wie erwartet, der Wert springt zwischendrin auf 0 und nimmt dann ruckartig den automatisch berechneten Wert an. Dieses Problem kann leider nur mit Javascript gelöst werden, in dem man die Höhe des Inhalts berechnet und explizit angibt.

 

Browserkompatibilität

 

Bildschirmfoto 2016-02-22 um 16.01.04

Abb. 1: CSS-Transitions werden von modernen Browsern bereits unterstützt. Für ältere Versionen empfiehlt sich die Verwendung von Browser-Prefixes.


Eine Übersicht von caniuse.com zeigt, dass CSS Transition bereits gut unterstützt werden. Problem macht der Internet Explorer ab einschließlich Version 9 abwärts. Allerdings lassen sich Transitions sehr gut für einen Progressive-Enhancement-Ansatz verwenden. Da nicht unterstützende Browser die transition Angaben einfach ignorieren, kann man diese getrost verwenden. Es macht aber Sinn die Angaben mit Browser-Prefixes zu versehen, da nicht ganz aktuelle Versionen von Firefox, Safari oder Chrome die Eigenschaft nicht ohne unterstützen.
 
 

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

After "next generation floating" in HTML

Gang und gäbe ist mittlerweile der Gebrauch von umfließenden Container in HTML (float). Allerdings führt das oft zu Problemen wenn man z.B mit unterschiedlichen Abständen und Positionierungen hantiert. Außerdem ist dieses Modell einfach umständlich und grausig zu implementieren.
Mit einem W3C Vorschlag Ende 2013 hielt das “Flexible Box Layout Module” Einzug in den CSS3 Standard. Die Idee hat man schon früher in der graphischen Programmierung. Innerhalb eines Containers wird eine unbestimmte Menge an Elementen untergebracht. Die Aufteilung der verfügbaren Breite erfolgt anhand von Anteilen.
Knapp ein Jahr später ist das Feature auch in den meisten Browsern verfügbar (Versionen später als November 2013).
Ein Beispiel
CSS:

.flex-container {
    display: flex;
}
.flex-item {
    flex: 1 1 auto;
    border: 1px #ff8000 solid;
}

HTML1 (gleiche Aufteilung):

Column 1
Column 2
Column 3

HTML2 (unterschiedliche Aufteilung):

Column 1
Column 2
Column 3
Column 4
Column 5

Weitere Informationen (z.B. Ausbreitung und Ausrichtung) findet man in den folgenden Links:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
Fazit: Endlich geile Container 😉

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.

Animationen für alle: CSS3 Transitions

In diesem Blogpost möchte ich mal ein wenig auf CSS3 eingehen. Das meiste, dass durch CSS3 ermöglicht wird, ging auch schon vorher – allerdings nicht selten mit hunderten Zeilen zusätzlichen Javascript-Code.
Wenn CSS3 erstmal in allen Browsern hinreichend unterstützt wird, ist vieles von diesem Code hinfällig.
Ein nettes Beispiel dafür bieten CSS Transisitons (die von den meisten WebKit Browsern wie Safari, Chrome, etc. bereits unterstützt werden):
Mit ihnen kann man CSS3 Transformationen auf ein HTML Element animieren.
Einfaches Beispiel: Eine Box soll sich um 30° drehen und dabei die Farbe und Größe ändern wenn man mit der Maus darüber geht.
Klingt aufwändig, ist aber ganz einfach, man definiert einfach ein Element mit der CSS Eigenschaft ‘transition-duration’, z.B.

#Element {
transition-duration: 1s linear;
-webkit-transition-duration: 1s linear;
-moz-transition-duration: 1s linear;
width: 200px;
height: 200px;
...
}

Will man das Objekt jetzt beim Mouseover animieren, benötigt man nur noch eine ‘transform’ Eigenschaft im CSS File:

#Element:hover {
transform: rotate(350deg) rotate(-30deg);
-webkit-transform: rotate(350deg) rotate(-30deg);
-moz-transform: rotate(350deg) rotate(-30deg);
}

Dieses Beispiel habe ich an einem Blogpost von Mozilla angelehnt (deren Firefox das auch bald unterstützt) und etwas abgespeckt, live im Browser kann man sich das hier anschauen (Safari, Chrome oder Opera vorrausgesetzt).
Das ganze sollte mit allen HTML Tags, die im Browser gezeichnet werden funktionieren – also kann man damit auch z.B. Videoflächen animieren.
Dezent eingesetzt lassen sich damit Schaltflächen schnell, einfach und ohne Programmierkenntnisse betonen.