CSS3 Transitionen

Beschreibung

CSS3 Transitionen ermöglichen die Animation von CSS-Eigenschaften zwischen einem
Anfangs- und einem Endzustand. Um eine Transition wirksam zu machen, müssen die
gewünschten CSS-Eigenschaften für den Endzustand gesetzt werden.

Beispiel

Man könnte sich wünschen, dass eine Box beim Überfahren mit dem Mauszeiger transformiert wird. Die Eigenschaften für den Endzustand sehen entsprechend so aus:

#box:hover {
  transform: translate(100px, 100px);
}

Nun gibt man der #box eine Transition, die sich auf die Transformation bezieht und die Erstellung von Zwischenbildern über einen Zeitraum von 2 Sekunden mit linearer Beschleunigung vornimmt:

#box {
  transition-property: transform;
  transition-duration: 2s;
  transition-timing-function: linear;
}

Shorthand

Für die gezeigte Definition lässt sich auch eine Abkürzung (engl. shorthand) verwenden:

#box {
  transition: transform 2s linear;
}

Möchte man, dass die Transition eine Auswirkung auf alle Zieleigenschaften hat, so muss all als transition-property gesetzt werden.

Cross-Browser CSS Transitions

transitionend oTransitionEnd MSTransitionEnd webkitTransitionEnd

CSS3 Transition with multiple properties

.transition {
  transition: left 0.3s ease, top 0.3s ease;
}

CSS3 Transition on all properties

.transition {
  transition: all 0.3s ease;
}

Bitte beachten: „ease“ ist die Standard für die „transition-timing-function“.

Combining transitions and transforms

      div {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: transform 3s ease;
      }
 
      div:hover {
        transform: rotate(30deg);
      }