Transition

Eine Transition besteht in der Regel aus zwei Zuständen (Schlüsselbilder), zwischen denen eine Animation abläuft. Die Transition entsteht durch veränderte Attributwerte, die zu definieren sind. Der Start muss über ein Ereignis ausgelöst werden, in den folgenden Beispielen wird das ein MouseOver mit der Pseudo-Klasse Hover sein.

Eigenschaft Bedeutung Wertzuweisung
transition Zusammenfassung property duration timing-function delay, initial, inherit
transition-property Eigenschaft für Animation none, all, property, initial, inherit
transition-timing-function Geschwindigkeit für Effekt ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(), initial, inherit
transition-duration Dauer des Effekts time, initial, inherit
transition-delay Verzögerung des Effekts time, initial, inherit;

transition-property

Mit transition-property legen sie fest, welche Eigenschaften dynamisch verändert werden sollen, transition-property ist nicht vererbbar.

div {
  width: 100px;
  height: 100px;
  background: yellow;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
  div:hover {
  width: 300px;
  height: 300px;
}

Mögliche Werte für transition-property

  • none: Keine Transition
  • all: Alle Eigenschaften (Standardwert)
  • Mit Komma getrennte Eigenschaften

transition-duration

Mit transition-duration legen sie die Dauer des Effekts in Sekunden(s) oder Millisekunden(ms) fest. Standardwert ist 0s (kein Effekt), transition-duration ist nicht vererbbar.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 5s;
  transition-property: width, height;
  transition-duration: 5s;
}
div:hover {
  width: 300px;
  height: 300px;
}

Mögliche Werte für transition-duration

  • Zeitangabe in Sekunden oder Millisekunden

transition-timing-function

Mit transition-timing-function legen sie die Geschwindigkeitskurve (Geschwindigkeit vom Start bis zum Ende) fest, transition-timing-function ist nicht vererbbar.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 5s;
  -webkit-transition-timing-function: linear;
  transition-property: width, height;
  transition-duration: 5s;
  transition-timing-function: linear;
}
div:hover {
  width: 300px;
  height: 300px;
}

Mögliche Werte für transition-timing-function

  • ease: Standardwert, Kurve = langsam, schnell, langsam
  • linear: gleichmäßige Geschwindigkeit
  • ease-in: Geschwindigkeit mit langsamen Start
  • ease-out: Geschwindigkeit mit langsamen Ende
  • ease-in-out: Geschwindigkeit mit langsamen Start und Ende
  • cubic-bezier(n,n,n,n): eigene Kurven bestimmen (bezier), mögliche Werte zwischen 0 und 1.

transition-delay

Mit transition-delay legen sie die Verzögerung vor dem Start in Sekunden(s) oder Millisekunden(ms) fest, transition-delay ist nicht vererbbar.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 5s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 2s;
  transition-property: width, height;
  transition-duration: 5s;
  transition-timing-function: linear;
  transition-delay: 2s;
}
div:hover {
  width: 300px;
  height: 300px;
}

Mögliche Werte für transition-delay

  • Zeitangabe in Sekunden oder Millisekunden

transition

Die transition-Eigenschaft ist eine Zusammenfassung von transition-property, transition-duration, transition-timing-function und transition-delay. Wenn Sie zwei Zahlenwerte angeben, ist der erste die Dauer (transition-duration), der zweite die Verzögerung (transition-delay) der Animation. transition ist nicht vererbbar.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width, height 5s linear 2s;
  transition: width, height 5s linear 2s;
}
div:hover {
  width: 300px;
  height: 300px;
}

Animation

Eine Transition ist ein animierter Übergang zwischen genau zwei Keyframes (Schlüsselbildern), der von einem Ereignis ausgelöst wird. Eine Animation kann beliebig viele Keyframes haben und braucht kein Ereignis zum auslösen. Die Animation läuft von einem Keyframe zum nächsten. Mit CSS kann man einstellen, dass eine Animation am Ende looped, rückwärts läuft oder zu Ende ist.

Eigenschaft Bedeutung Wertzuweisung
@keyframes Animationssequenz animationname {keyframes-selector {css-styles;}}
animation Zusammenfassung name duration timing-function delay iteration-count direction fill-mode play-state, initial, inherit
animation-name Animation-name für @keyframes Regel keyframename, none, initial, inherit
animation-duration Dauer der Animation time, initial, inherit
animation-timing-function Beschleunigungskurven der Animation linear, ease, ease-in, ease-out, cubic-bezier(n,n,n,n), steps(), step-start, step-end, initial, inherit
animation-delay Verzögerung vor dem Start time, initial, inherit;
animation-iteration-count Anzahl der Wiederholungen number, infinite, initial, inherit;
animation-direction Verlauf die Animation normal, reverse, alternate, alternate-reverse, initial, inherit;
animation-fill-mode Status nach Beendigung der Animation none, forwards, backwards, both, initial, inherit;
animation-play-state Animation kann laufen oder pausieren paused, running, initial, inherit;

@keyframes

Eine Animation hat beliebig viele Keyframes (Schlüsselbilder). Die Animation läuft von einem Keyframe zum nächsten, mit Keyframes werden also Sclüsselbilder definiert. Mit der @keyframes-Regel werden wichtige Bestandteile erstellt:

  1. Ein Name für die Animation
  2. Ein Start- und ein Endpunkt mit den Schlüsselwörtern from und to
  3. Oder mehrere Start- und Endpunkte als Prozentwerte
  4. Den Zustand des Elements im jeweiligen Schlüsselbild mit CSS-Eigenschaften

Dia Syntax der @keyframes-Regel sieht wie folgt aus:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/*Alternativ*/
@keyframes example {
  0% {background-color: red;}
  100% {background-color: yellow;}
}

Diese Animation besteht aus zwei Schlüsselbilder, achten sie auf das korrekte Setzen der geschwungenen Klammern. Auf diese Weise kann man weitere Schlüsselbilder einfügen.

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

animation-name

Mit der animation-name-Eigenschaft wird der name der @keyframes-Regel im gewünschtem Element aufgerufen, animation-name ist nicht vererbbar.

div {
-webkit-animation-name: example;
animation-name: example;
}

Mögliche Werte für animation-name

  • Keyframe-Name
  • none: Standardwert - keine Animation

animation-duration

Mit der animation-duration-Eigenschaft wird die Dauer der Animation in Sekunden (s) oder Millisekunden (ms) festgelegt, animation-duration ist nicht vererbbar.

div {
-webkit-animation-name: example;
-webkit-animation-duration: 2s;
animation-name: example; 
animation-duration: 2s;
}

Mögliche Werte für animation-duration

  • Zeitangabe Standarwert = 0

animation-timing-function

Mit animation-timing-function legen sie die Geschwindigkeitskurve (Geschwindigkeit vom Start bis zum Ende) fest, animation-timing-function ist nicht vererbbar.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
}

Mögliche Werte für animation-timing-function

  • ease: Standardwert, Kurve = langsam, schnell, langsam
  • linear: gleichmäßige Geschwindigkeit
  • ease-in: Geschwindigkeit mit langsamen Start
  • ease-out: Geschwindigkeit mit langsamen Ende
  • ease-in-out: Geschwindigkeit mit langsamen Start und Ende
  • cubic-bezier(n,n,n,n): eigene Kurven bestimmen (bezier), mögliche Werte zwischen 0 und 1
  • steps(Anzahl): positive Zahl, legt die Anzahl der Schritte fest
  • steps(Anzahl, end): (Standardwert) Animation wird am Ende des Schritts ausgeführt
  • steps(Anzahl, start): Animation wird am Beginn des Schritts ausgeführt
  • step-start: Equivalent zu steps(1,start)
  • step-end: Equivalent zu steps(1,end)

animation-delay

Mit animation-delay legen sie die Verzögerung vor dem Start in Sekunden(s) oder Millisekunden(ms) fest, animation-delay ist nicht vererbbar.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
}

Mögliche Werte für animation-delay

  • Zeitangabe in Sekunden oder Millisekunden

animation-iteration-count

Mit animation-iteration-count legen sie fest, wie oft die Animation laufen soll, animation-iteration-count ist nicht vererbbar.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: 3;
  
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Mögliche Werte für animation-iteration-count

  • Zahl: wie oft soll die Animation laufen, Standardwert ist 1
  • infinite: Endlosschleife

animation-direction

Mit animation-direction legen sie fest, in welcher Richtung die Animation laufen soll, animation-direction ist nicht vererbbar.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Mögliche Werte für animation-direction

  • normal: Animation läuft Vorwärts (Standardwert)
  • reverse: Animation läuft Rückwerts
  • alternate: 1x vor dann zurück usw.
  • alternate-reverse: 1x zurück dann vor usw.

animation-fill-mode

Mit animation-fill-mode legen sie den Zustand des Elements am Ende der Animation fest, animation-fill-mode ist nicht vererbbar.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

Mögliche Werte für animation-fill-mode

  • none: zurück zum initialen Zustand am Ende der Animation (Standardwert)
  • forwards: bleibt beim ersten Keyframes stehen wendet die Eigenschaften vor dem ersten Keyframe an
  • backwards: bleibt beim letzten Keyframes stehen wendet die Eigenschaften nach dem letzten Keyframe an
  • both: bleibt beim letzten Keyframe stehen wendet das CSS vor dem ersten und nach dem letzten Keyframe an

animation-play-state

Mit animation-play-state legen sie fest, ob die Animation läuft oder pausiert, animation-play-state ist nicht vererbbar. Diese Eigenschaft ist nützlich, wenn Sie die Animation durch JavaScript steuern wollen.

div {
  -webkit-animation-name: example;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
  
  animation-name: example; 
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

Mögliche Werte für animation-play-state

  • running: Animation läuft (Standardwert)
  • paused: Animation läuft nicht

animation

Die animation-Eigenschaft ist eine Zusammenfassung von allen acht Eigenschaften. Wenn Sie zwei Zahlenwerte angeben, ist der erste die Dauer (animation-duration), der zweite die Verzögerung (animation-delay) der Animation. animation ist nicht vererbbar.

div {
  -webkit-animation: example 2s linear 2s infinite alternate forwards;
  animation: example 2s linear 2s infinite alternate forwards;
}

Transform

CSS-transform verändert die Lage und Form von HTML-Elementen. Folgende Transformierungen stehen zur Verfügung:

Die Transformation hat keine Auswirkung auf den Flow der restlichen HTML-Elemente. Ein mit CSS-Transforms verändertes Element verschiebt keine Elemente im HTML-Flow, sondern überlagert diese ähnlich der absoluten Positionierung. Es gibt zwei unterschiedliche transform-Eigenschaften, nämlich 2D- und 3D-Transforms.

Bitte beachten sie, dass diese Technologie noch nicht komplett implementiert wurde. So sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird. Neue Browser sollten Transform-Eigenschaften und -Methoden verstehen, Webkit- und Mozilla-Browser benötigen ein Präfix (proprietäre Eigenschaften), transform-Eigenschaften sind nicht vererbbar.

Proprietäre Eigenschaften die sie testen sollten

  • -webkit-transform:
  • -moz-transform:
  • -ms-transform:
  • -o-transform:
  • transform:

2D Transform

2D Transformationen ermöglichen, dass Elemente in einem zweidimensionalen Raum transformiert werden (x- und y-Achse). 2D Transformationen stellen zwei Eigenschaften zur Verfügung, transform und transform-origin.

Eigenschaft Bedeutung Wertzuweisung
transformElemente bewegen, skalieren, rotieren, verzerrenmatrix, translate, scale, rotate, skew
transform-origin (two-value syntax)Kann den Mittelpunkt oder Drehpunkt eines Elements setzen x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), initial, inherit

transform

Die transform-Eigenschaft gibt es als 2D und 3D Version. Die Methoden von transform sind umfangreich, sehr komplex ist die matrix-Methode mit 6 Zahlenwerten, damit kann man bewegen, skalieren, rotieren, verzerren mit nur einer Methode gleichzeitig.

div {
  -ms-transform: matrix(0.586,0.8,-0.8,0.586,10,0);
  -webkit-transform: matrix(0.586,0.8,-0.8,0.586,10,0);
  transform: matrix(0.586,0.8,-0.8,0.586,10,0);
}

Weitere Methoden der transform-Eigenschaft

  • none: Keine Transformation
  • matrix(n,n,n,n,n,n): 2D transformation, Matrix mit 6 Zahlenwerte (bewegen, skalieren, rotieren, verzerren)
  • translate(x,y): (x- und y-Achse) positioniert das Element um n-Pixel nach rechts und unten, negative Werte nach links und oben
  • translateX(n): positioniert das Element entlang der x-Achse
  • translateY(n): positioniert das Element entlang der y-Achse
  • scale(x,y): mit einem Wert wird proportional skaliert, zwei Werte für Breite und Höhe. Der Wert von 1 steht für 100%, hat also keinen Skalierungseffekt. Entsprechend verkleinert der Wert 0.5 um 50% und vergrößert der Wert 2 um 200%
  • scaleX(n): skaliert die Breite des Elements
  • scaleY(n): skaliert die Höhe des Elements
  • rotate(angle): Rotation in Grad Werte von 0 bis 360deg
  • skew(x-angle,y-angle): Neigung oder Scherung (Parallelogramme) Werte von 0 bis 180deg – auch negativ, entweder ein gemeinsamer Wert für die x- und y-Achse oder zwei Werte mit einem Komma getrennt
  • skewX(angle): Neigung oder Scherung entlang der x-Achse
  • skewY(angle): Neigung oder Scherung entlang der y-Achse

transform-origin

Mit der Eigenschaft transform-origin können Sie einen Mittelpunkt (Drehpunkt) für transform:rotate() festlegen, um den ein Element gedreht wird. Der Standardwert ist 50% 50%. Setzt man die beiden Werte auf 0% so ist der Drehpunkt oben links. Den Drehpunkt definieren sie mit zwei Angaben, einen für die x-Achse und einen für die y-Achse.

div {
  -ms-transform: rotate(45deg);
  -ms-transform-origin: 20% 40%;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 20% 40%;
  transform: rotate(45deg);
  transform-origin: 20% 40%;
} 

Weitere Werte für transform-origin

  • x-Achse (Längenangabe, Prozentangabe, left, center, right)
  • y-Achse (Längenangabe, Prozentangabe, top, center, bottom)

3D Transform

3D-Transformationen erweitern 2D-Transformationen um eine dritte Dimension. Neben der x- und der y-Achse gibt es die z-Achse, welche die Tiefe des Elements bestimmt.

Eigenschaft Bedeutung Wertzuweisung
transformElemente bewegen, skalieren, rotieren, verzerrenmatrix, translate, scale, rotate, skew
transform-origin (three-value syntax)Kann den Mittelpunkt oder Drehpunkt eines Elements setzen x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), z-Achse (Längenangabe), initial, inherit
transform-style 3D Ansicht der Kindelemente flat, preserve-3d, initial, inherit
perspective Perspektivische Ansicht des Kindelements none, Längenangabe
perspective-origin Position des Kindelements an der x- und der y-Achse x-Achse (left, center, right, Längenangabe, Prozentangabe) y-Achse (top, center, bottom, Längenangabe, Prozentangabe), initial, inherit
backface-visibility Sichtbarkeit der Rückseite eines 3D-Elements visible, hidden, initial, inherit

transform

Die transform-Eigenschaft in der 3D Version erweitert die Methoden um eine dritte Dimension. Die matrix-Methode tritt hier mit 16 Zahlenwerten auf, alle weiteren Methoden bekommen eine Achse dazu.

.z img {
-webkit-transform: rotateZ(50deg);
-ms-transform: rotateZ(50deg);
transform: rotateZ(50deg);
}

Alle Methoden der transform-Eigenschaft (2D und 3D)

  • none: Keine Transformation
  • matrix(n,n,n,n,n,n): 2D transformation, Matrix mit 6 Zahlenwerten (bewegen, skalieren, rotieren, verzerren)
  • matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3D transformation, Matrix mit 16 Zahlenwerten (bewegen, skalieren, rotieren, verzerren)
  • translate(x,y): (x- und y-Achse) positioniert das Element um n-Pixel nach rechts und unten, negative Werte nach links und oben
  • translate3d(x,y, z): (x- y- und z-Achse) positioniert das Element um n-Pixel nach rechts unten und hinten, negative Werte nach links oben und vorne
  • translateX(n): positioniert das Element entlang der x-Achse
  • translateY(n): positioniert das Element entlang der y-Achse
  • translateZ(n): positioniert das Element entlang der z-Achse
  • scale(x,y): mit einem Wert wird proportional skaliert, zwei Werte für Breite und Höhe. Der Wert von 1 steht für 100%, hat also keinen Skalierungseffekt. Entsprechend verkleinert der Wert 0.5 um 50% und vergrößert der Wert 2 um 200%
  • scale3d(x,y, z): Skalierungseffekt mit einer dritten Dimension
  • scaleX(n): skaliert die Breite des Elements
  • scaleY(n): skaliert die Höhe des Elements
  • scaleZ(n): skaliert die Tiefe des Elements
  • rotate(angle): Rotation in Grad Werte von 0 bis 360deg
  • rotate3d(x,y,z,angle): Längenangabe für x, y, z und Winkel in Grad Werte von 0 bis 360deg
  • rotateX(angle): Rotation an der x-Achse
  • rotateY(angle): Rotation an der y-Achse
  • rotateZ(angle): Rotation an der z-Achse
  • skew(x-angle,y-angle): Neigung oder Verzerrung (Parallelogramme) Werte von 0 bis 180deg – auch negativ, entweder ein gemeinsamer Wert für die x- und y-Achse oder zwei Werte mit einem Komma getrennt
  • skewX(angle): Neigung oder Verzerrung entlang der x-Achse
  • skewY(angle): Neigung oder Verzerrung entlang der y-Achse
  • perspective(n): Kann als Eigenschaft, oder Methode von transform geschrieben werden