Transforms, Transitions und Animations

Moderne Websites werden zunehmend dynamischer, wobei diese Dynamik nicht mehr mit JavaScript erzeugt wird sondern mit den Mitteln von CSS. Elemente lassen sich dadurch in ihrer Lage verändern, verkleinern und vergrößern, verzerren oder rotieren. Diese erreicht man mit der Eigenschaft transform. Weiche Übergänge lassen sich mit Hilfe der Eigenschaft transition gestalten und mit der Eigenschaft animation lassen sich komplexere Animationen erzeugen.

Transforms

Folgende Werte können mit der CSS-Eigenschaft transform eingesetzt werden:

• translate(x, y) verschiebt das Element um x Pixels nach rechts und um y Pixels nach unten.
• translateX(n) verschiebt das Element um n Pixels nach rechts.
• translateY(n) verschiebt das Element um n Pixels nach unten.
• scale(w,h) ändert width und height des Elements.
• scaleX(w) ändert width des Elements.
• scaleY(h) ändert height des Elements.
• rotate(angle) rotiert das Element um den entsprechenden Winkel.
• skew(x-angle, y-angle) verzerrt das Element um einen bestimmten Winkel entlang der x- bzw. y-Achse
• skewX(angle) verzerrt das Element um einen bestimmten Winkel entlang der x-Achse
• skewY(angle) verzerrt das Element um einen bestimmten Winkel entlang der y-Achse

See the Pen ed7a72d1110c10331025578b12b20a13 by Bernd Schiller (@Bernie14153) on CodePen.

Transitions

Die CSS-Eigenschaft transition ermöglicht einen fließenden Übergang zwischen Attributwerten über einen vorgegebenen Zeitraum hinweg. Der transition-Effekt beginnt mit dem Wechsel eines Attributwertes (z.B. bei :hover). Die transition-Eigenschaft hat vier Werte:

• transition-property Damit wird die Eigenschaft festgelegt, die sich ändert.
• transition-duration Spezifiziert die Dauer des übergangs in s oder ms.
• transition-delay Legt die Zeit in s oder ms bis zum Beginn des transition-Effekts fest.
• transition-timing function Legt den Geschwindigkeitsverlauf der transition fest. Zulässige Werte sind: ease, linear, ease-in, ease-out, ease-in-out

See the Pen aEvrdo by Bernd Schiller (@Bernie14153) on CodePen.

Animations

Animations ermöglichen einen fließenden Übergang von einem Stil zum anderen, wobei beliebig viele Eigenschaften beliebig oft geändert werden können. Um die CSS animation-Eigenschaft verwenden zu können müssen zuerst sogenannte keyframes festgelgt werden. Diese definieren, welche Eigenschaften ein Element zu einer bestimmten Zeit hat.

Die @keyframes-Regel

Innerhalb der @keyframes-Regel wird festgelegt, bei welchem Attributwert der Übergang beginnt und wo er endet. Die Animation funktioniert erst, wenn die Animation mit dem entsprechenden Elelement verbunden wird.

Die Animation kann mit mehreren Eigenschaften spezifiziert werden:

• anmation-name Gibt den Namen der zugehörigen @keyframes-Animation an.
• animation-duration Legt die Dauer der Animation in s oder ms fest.
• animation-delay Legt fest, nach wievielen s bzw. ms die Animation beginnt.
• animation-iteration-count Legt fest, wie oft die Animation wiederholt werden soll (Anzahl bzw. infinite)
• animation-direction Legt die Abspielrichtung der Animation fest. Zulässige Werte: reverse, alternate, alternate-reverse
• animation-timing-function Legt den Geschwindigkeitsverlauf der Animation fest. Zulässige Werte sind: ease, linear, ease-in, ease-out, ease-in-out

See the Pen ZvbNLZ by Bernd Schiller (@Bernie14153) on CodePen.