Skip to content
JavaScript Reference

CSS transitions

Es gibt drei Wege, Animationen zu machen:

  • CSS Transitions
  • CSS Animations
  • JavaScript Animations

CSS Transitions

Section titled “CSS Transitions”

Sind die leichteste Übung. Wir verwenden dazu die Eigenschaft transition.

.selector {
  transition: property duration transition-timing-function delay;
}

transition ist ein Shorthand für vier Eigenschaften:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Triggering transitions

Section titled “Triggering transitions”

CSS Transitions triggern

  1. wenn es eine transition-property gibt
  2. und wenn sich der Wert zwischen zwei Zuständen ändert

Das bedeutet, man kann Transitions direkt über Pseudoklassen wie :hover, :focus oder :active triggern.

.button {
  background-color: crimson;
  transition: background-color 0.5s ease-in-out;
}
.button:hover {
  background-color: plum;
}

Transitions können aber auch mit JavaScript durch hinzufügen oder entfernen einer Klasse getriggert werden.

.button {
  background-color: crimson;
  transition: background-color 0.5s ease-in-out;
}
.button.is-active {
  background-color: plum;
}