EMZETT.Transformationen
transform verschiebt, dreht, skaliert oder neigt ein Element, ohne das Layout der anderen zu beeinflussen:
Ergebnis
| Funktion | Wirkung |
|---|---|
translate(x, y), translateX() | verschieben |
rotate(45deg) | drehen |
scale(1.5) | vergrößern/verkleinern |
skew(10deg) | neigen |
transform-origin | Drehpunkt (center, top left, 50% 100%) |
translate: 10px, rotate: 5deg, scale: 1.2 | einzelne Eigenschaften (modern) |
3D: perspective, rotateX(), rotateY(), transform-style: preserve-3d.
Übergänge (transition)
Ein Übergang lässt Änderungen weich ablaufen, statt sofort zu springen:
Ergebnis
transition: eigenschaft dauer easing verzögerung;
| Teil | Werte |
|---|---|
| Eigenschaft | all oder bestimmte (opacity, transform, ...) |
| Dauer | .3s, 300ms |
| Easing | ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...) |
| Verzögerung | .1s |
Nicht alle Eigenschaften lassen sich animieren (display zum Beispiel nicht direkt). Besonders flüssig und sparsam laufen `transform` und `opacity`, weil sie die Grafikkarte nutzen. Animiere nicht width, height, top oder left, wenn es auch mit transform geht.
Aufklappen mit Übergang
Ergebnis
Animationen mit @keyframes
Mit @keyframes definierst du eine Abfolge, mit animation wendest du sie an:
Ergebnis
| Eigenschaft | Bedeutung |
|---|---|
animation-name | Name der Keyframes |
animation-duration | Dauer |
animation-timing-function | Easing (steps(8) für Sprites) |
animation-delay | Verzögerung |
animation-iteration-count | Anzahl oder infinite |
animation-direction | normal, reverse, alternate |
animation-fill-mode | forwards (Endzustand behalten), both |
animation-play-state | running, paused |
Kurzform: animation: huepfen .9s ease-in-out infinite;
Ladeanzeige
Ergebnis
Bewegung respektieren
Manche Menschen reagieren auf Bewegung mit Übelkeit oder Schwindel. Sie stellen im System "Bewegung reduzieren" ein. Berücksichtige das:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}Beschränke dich außerdem auf Bewegung, die etwas bedeutet (Rückmeldung, Zustandswechsel), und lass nichts länger als 5 Sekunden ohne Pausemöglichkeit laufen.
Scrollgesteuert und View Transitions
Moderne CSS-Funktionen: animation-timeline: scroll() und view() koppeln Animationen an das Scrollen, die View Transitions API animiert Seitenwechsel. Sie sind in aktuellen Browsern verfügbar, aber prüfe die Unterstützung auf MDN/caniuse.
Merke
transform(verschieben, drehen, skalieren) undopacitysind die effizientesten Animationseigenschaftentransitionmacht Zustandswechsel weich (hover,focus, Klassenwechsel)@keyframes+animationfür Abläufe, auch endlos- Respektiere
prefers-reduced-motion - Animiere sparsam und mit Bedeutung
Aufgabe
Baue einen Button mit weichem Hover-Effekt, ein Element, das beim Laden einblendet, und eine Ladeanzeige. Schalte alle Animationen bei prefers-reduced-motion ab.