HTML / CSS LEVEL 4

transform, transition, animation

transform

Mit transform können Element transformiert werden, ohne dass dies Einfluss auf den Rest des Dokuments hat.

 

Es gibt 2D und 3D transforms. Wir schauen uns hier nur 2D an.

transform

Es gibt 5 2D-transform Methoden. Diese sind gut unterstützt von allen gängigen Browser. Ausser IE8.

 

translate

rotate

scale

skewX

skewY

 

alle basieren auf matrix()

Aufgabe

Erstelle eine Box mit Hintergrund und wende translateX, translateY, scale, rotate, skewX, skewY darauf an.

 

Verwende bei translate % Werte und merke, wie sich das verhält. Was ist anders als bei margin und padding und positionierten Elementen und % Werten?

 

Nachschlagewerk: http://tympanus.net/codrops/css_reference/transform/

transform-origin

Mit transform-origin definieren wir den Punkt, an dem sich transforms orientieren.

 

default ist: 50% 50% also die Mitte.

 

transform-origin: top center;
transform-origin: 100% 30px;
transform-origin: 30px 60px;
transform-origin: center;
transform-origin: left;
transform-origin: 30% 50% 0px;
transform-origin: bottom right;

transition

Mit transition können wir erreichen, dass die Änderung eines properties animiert wird.

 

Sehr viele properties erlauben eine transition. Eigentlich alles, was sich interpolieren lässt.

transition

transition ist ein shorthand property für

 

transition-property, transition-duration, transition-timing-function, transition-delay

 

/* one transition */
transition: background-color .3s linear;
/* multiple transitions */
transition: color .6s ease, font-size .3s linear;
transition: background-color 1s linear,
            left .6s ease-out 1s;

transition

animation

Mit animation können wir eigene keyframes definieren und damit komplexe animationen erstellen.

 

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-fill-mode];

 

keyframes

 

@keyframes bg {
  from {
    background-color: red;
  }
  to {
    background-color: black;
  }
}

 

keyframes

 

@keyframes bg {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: black;
  }
}

 

Resourcen

HTML / CSS Level 4: transforms, animations

By benib

HTML / CSS Level 4: transforms, animations

  • 956