HTML + CSS: Übergänge, Transformationen und Animationen

Kurz: transform verschiebt, dreht, skaliert oder neigt ein Element, ohne das Layout der anderen zu beeinflussen:

Teil des Kurses HTML + CSS

Kapitel 23 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Transformationen

transform verschiebt, dreht, skaliert oder neigt ein Element, ohne das Layout der anderen zu beeinflussen:

<style>
  .reihe { display: flex; gap: 30px; padding: 30px; }
  .reihe div { width: 60px; height: 60px; background: #6366f1; color: white; display: grid; place-items: center; }
  .t1 { transform: translate(20px, 10px); }
  .t2 { transform: rotate(25deg); }
  .t3 { transform: scale(1.4); }
  .t4 { transform: skew(20deg, 0); }
  .t5 { transform: rotate(45deg) scale(.8) translateX(10px); }  /* Reihenfolge zählt */
</style>
<div class="reihe"><div class="t1">move</div><div class="t2">rotate</div><div class="t3">scale</div><div class="t4">skew</div><div class="t5">alle</div></div>

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:

<style>
  .knopf {
    padding: 12px 22px; border: 0; border-radius: 8px; color: white; cursor: pointer;
    background: #4f46e5;
    transition: background-color .25s ease, transform .15s ease, box-shadow .25s;
  }
  .knopf:hover { background: #7c3aed; transform: translateY(-3px); box-shadow: 0 8px 20px #4f46e544; }
  .knopf:active { transform: translateY(0) scale(.97); }
  .knopf:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
</style>
<button class="knopf">Fahre mit der Maus darüber</button>

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

<style>
  .akk { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; background: #e0f2fe; }
  .akk > div { overflow: hidden; }
  .akk.offen { grid-template-rows: 1fr; }
  button { margin-bottom: 6px; }
</style>
<button onclick="this.nextElementSibling.classList.toggle('offen')">Auf- und zuklappen</button>
<div class="akk"><div><p style="padding:10px;margin:0">Dieser Inhalt klappt weich auf, ohne eine feste Höhe zu kennen. Der Trick ist der Übergang von <code>0fr</code> zu <code>1fr</code>.</p></div></div>

Animationen mit @keyframes

Mit @keyframes definierst du eine Abfolge, mit animation wendest du sie an:

<style>
  @keyframes huepfen {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-40px); }
    100% { transform: translateY(0); }
  }
  @keyframes einblenden {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes puls {
    0%, 100% { box-shadow: 0 0 0 0 #ef444488; }
    70%      { box-shadow: 0 0 0 16px #ef444400; }
  }
  .ball { width: 40px; height: 40px; border-radius: 50%; background: #f59e0b; animation: huepfen .9s ease-in-out infinite; margin: 50px 0 10px; }
  .text { animation: einblenden .8s ease both; }
  .punkt { width: 20px; height: 20px; border-radius: 50%; background: #ef4444; animation: puls 1.6s infinite; margin: 16px; }
</style>
<div class="ball"></div>
<p class="text">Dieser Text blendet beim Laden ein.</p>
<div class="punkt"></div>

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

<style>
  .spinner { width: 36px; height: 36px; border: 4px solid #e2e8f0; border-top-color: #4f46e5; border-radius: 50%; animation: dreh .8s linear infinite; }
  @keyframes dreh { to { transform: rotate(360deg); } }
  .punkte span { display: inline-block; width: 10px; height: 10px; margin: 0 3px; background: #4f46e5; border-radius: 50%; animation: hup 1s infinite ease-in-out; }
  .punkte span:nth-child(2) { animation-delay: .15s; } .punkte span:nth-child(3) { animation-delay: .3s; }
  @keyframes hup { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
</style>
<div class="spinner" role="status" aria-label="Lädt"></div>
<p class="punkte" aria-hidden="true"><span></span><span></span><span></span></p>

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) und opacity sind die effizientesten Animationseigenschaften
• transition macht Zustandswechsel weich (hover, focus, Klassenwechsel)
• @keyframes + animation für Abläufe, auch endlos
• Respektiere prefers-reduced-motion
• Animiere sparsam und mit Bedeutung

Übungsaufgabe

Baue einen Button mit weichem Hover-Effekt, ein Element, das beim Laden einblendet, und eine Ladeanzeige. Schalte alle Animationen bei prefers-reduced-motion ab.

Quiz zur Selbstkontrolle

Welche Eigenschaften animiert man am besten?

• transform und opacity (richtig)
• width und height
• top und left
• margin

Wofür ist @keyframes?

• Für die Schritte einer Animation (richtig)
• Für Tastaturkürzel
• Für Schlüsselwörter
• Für Variablen

Was reagiert auf prefers-reduced-motion?

• Eine Media Query für Menschen, die weniger Bewegung wollen (richtig)
• Ein Gerätesensor
• Ein HTML-Attribut
• Eine JavaScript-Funktion

Weiter im Kurs

Zurück: CSS-Variablen und Funktionen

Weiter: Moderne CSS-Funktionen

Alle Kapitel: HTML + CSS im Überblick