CSS

Fortgeschritten

Spezifität erklärt, welche Regel gewinnt. Transitions und Transforms bringen Bewegung — ohne JavaScript.

Spezifität

Bei konkurrierenden Regeln gewinnt die höhere Spezifität: IDs zaehlen mehr als Klassen, Klassen mehr als Elemente.

Als Merkform (a, b, c): a zählt IDs, b zählt Klassen, Attribute und Pseudoklassen, c zählt Elemente. #nav .item a ergibt (1, 1, 1).

Bei gleicher Spezifität gewinnt die später definierte Regel. !important übersteuert alles und sollte die Ausnahme bleiben.

Transitions

transition animiert Wertänderungen weich, etwa bei :hover.

Angegeben werden Eigenschaft, Dauer und Timing-Funktion.

Weicher Hover

.button {
  background: #0f766e;
  transition: background 0.3s ease;
}

.button:hover {
  background: #115e59;
}

Transforms und Keyframes

transform verschiebt (translate), skaliert (scale) oder rotiert (rotate) ein Element, ohne das Layout drumherum zu verändern.

@keyframes definiert mehrstufige Animationen, die mit animation abgespielt werden.

Pulsieren

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.badge {
  animation: pulse 2s infinite;
}

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.