Der Schattenwurf (Bild 2)
Transparenzen mit RGBA
RGBA steht für Red, Green, Blue und Alpha und ist ein Format um Farbinformationen zu definieren. Üblicherweise werden Farbwerte in CSS mittels Hexadezimal als #RRGGBB angegeben. In RGBA werden die Werte für die drei Grundfarben als Dezimalzahl mit einem Wert zwischen 0 und 256 angegeben. Der Alpha-Wert steht für die Transparenz und liegt im Bereich zwischen 0 und 1. Ein halbe Transparenz wird demnach mit 0.5 angegeben, während 1 bedeutet, dass das Element komplett undurchsichtig ist und 0 für vollständige Transparenz steht. In folgenden Beispiele haben die drei Container einen Alpha-Wert von 0.9, 0.5 und 0.1:
#c1{background-color: rgba(255,0,0,0.9); }
#c2{background-color: rgba(255,0,0,0.5); }
#c3{background-color: rgba(255,0,0,0.1); }
Das Ergebnis zeigt sich am deutlichsten vor einem Schachbrettmuster, wie in Bild 3.
Transparenzen vor einem Schachbrettmuster (Bild 3)
Im Gegensatz zu der Anweisung opacity bezieht sich hier der Alpha-Wert nur auf den Hintergrund des Containers, während bei opacity der komplette Container samt Inhalt diese Transparenz zugewiesen bekommt.
Transforms
Mit Transforms können HTML-Elemente transformiert werden. Unter anderem kann die Größe geändert und das Element gedreht, verschoben und verzerrt werden. Am Anschaulichsten ist das in folgendem Beispiel zu sehen:
#c1 { -moz-transform: rotate(-32deg); }
#c2 { -moz-transform: skew(29deg); }
#c3 { -moz-transform: scale(1.5); }
#c4 { left:550px; border: 1px solid red; }
#c5 { left:550px; -moz-transform:translate(20px); }
Der erste Container wird mittels rotate um –32 Grad gedreht. skrew verzerrt den zweiten Container um den angegebenen Winkel. Container drei wird auf die eineinhalbfache Größe aufgeblasen während Container fünf gegenüber dem roten Container vier durch translate um 20 Pixel verschoben wird, obwohl die absolute Position von 550 Pixeln vom linken Rand entfernt dieselbe ist (Bild 4).
Die vier Transformationen (Bild 4)
Alle Transforms legen ihren Bezugspunkt auf die Mitte des Elements. Diese kann auch verändert werden. So kann ein Element nicht nur um die Mittelachse gedreht werden, sondern die Drehachse um jeden beliebigen Punkt in Abhängigkeit zum Element gesetzt werden:
#c1 { -moz-transform: rotate(-20deg); }
#c2 { -moz-transform-origin: top left;
-moz-transform: rotate(-20deg); }
In diesem Beispiel wird bei dem linken Container eine Drehung um den Element-Mittelpunkt bewirkt, während der zweite Container um die linke obere Ecke gedreht wird (Bild 5).
Transitions
Transitions bieten eine einfache Möglichkeit der Animation. Streng genommen handelt es sich um eine Keyframe-Animation, die allerdings nur einen Start- und einen Stop-Punkt kennt. Zwischenschritte sind hier nicht möglich. Transitions definieren, welche CSS-Eigenschaften animiert werden, in welcher Zeit das geschieht und in welchem Zeitablauf. Dazu werden die Eigenschaften des Elements zum Start-Zeitpunkt definiert. Mit der Pseudo-Eigenschaft hover werden diese Eigenschaften beim Überfahren des Elements mit der Maus überschrieben. Alternativ kann mittels JavaScript eine neue Klasse zugewiesen werden.
Setzen eines neuen Bezugpunktes (Bild 5)
Die neue Klasse beziehungsweise die Hover-Eigenschaft definiert den Zustand des Stop-Punktes. Alle Zwischenschritte werden automatisch interpoliert:
.myclass{ left: 20px;
-moz-transition:All 3s ease-in;}
.myclass:hover { left:100px;}
In diesem Beispiel wird die Zeit der Animation auf drei Sekunden gesetzt. Der Parameter All besagt, dass alle Eigenschaften animiert werden. In diesem Fall hätte stattdessen auch einfach left ausgereicht. Der letzte Parameter definiert den Zeitablauf. ease-in bedeutet eine einfache langsame Beschleunigung, während ease-out langsam abbremst. Möchte man langsam beschleunigen und sanft abbremsen, kommt ease-in-out zum Zug. Soll die Bewegung gleichbleibend sein, ist linear der richtige Wert. Es kann auch eine eigene Timing-Funktion mit Bezier-Kurven erstellt werden. Ein gutes Hilfsmittel ist Ceaser. Eine einfache Bezier-Kurve könnte dann so aussehen:
-moz-transition-timing-function:
cubic-bezier(0.025, 0.720, 0.975, 0.510);
Aus dem Kopf sind Bezier-Kurven nicht leicht zu definieren, daher sollten Sie Tools wie Ceaser zu Hilfe nehmen. Mit Transitions lassen sich die meisten CSS-Eigenschaften animieren.
CSS3-Animations
Transitions kennen nur einen Start- und einen Stop-Zustand des Objektes. Für komplexere Animationen wird eine richtige Keyframe-Animation benötigt, die mehrere Zustände des Elements im zeitlichen Verlauf abbilden kann:
#c1 {
-moz-animation: myanim 3s;
top:50px;
}
@-moz-keyframes myanim {
0% {left: 50px;}
25% {left: 300px;}
50% {left: 150px; top:450px;}
75% {left: 150px;}
100% {left: 300px;top: 250px;}
}
Die Anweisung animation definiert in diesem Beispiel den Namen der Keyframe-Animation und die Dauer einer Animations-Runde. Über die Eigenschaft @keyframes werden die einzelnen Keyframes definiert. Dabei wird der Name mit angegeben, der dann über animation angesprochen wird. Die Prozentangaben beziehen sich immer auf eine Animationsrunde. Animations kennt mehrere Eigenschaften mit denen die Animation beeinflusst werden kann:
-moz-animation-name: myanim;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
Die Eigenschaft animation-name definiert den Namen der Keyframe-Animation. Über animation-duration wird die Dauer einer animationsrunde gesetzt, während die animation-timing-function analog zu den Timingfunktionen der Transitions funktioniert. animations-delay verzögert den Start der Animations um die angegebene Zeit. Die Anzahl der Animationsrunden wird über animation-iteration-count bestimmt. Standardwert ist 1, das heißt, dass die Animation nur einmal durchlaufen wird. Der Wert infinite bewirkt, das die Animation durchlaufend wiederholt wird. Um eine Animation rückwärts laufen zu lassen, wird animation-direction mit reverse übergeben. Ob eine Animation überhaupt läuft oder pausiert ist, wird über die Anweisung animation-play-state definiert. Mit Keyframe-Animationen können komplexe Animationen erschaffen werden, da so gut wie jede CSS-Anweisung in die Animation eingebunden werden kann.