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
Beispiele:
transform: http://jsbin.com/rafina/
transition: http://jsbin.com/laqici/
animation: http://jsbin.com/jafuva
animation: http://jsbin.com/picavu/
timing-functions: http://cubic-bezier.com/
HTML / CSS Level 4: transforms, animations
By benib
HTML / CSS Level 4: transforms, animations
- 956