Animationen

Änderungen von CSS Styles über die Zeit (z. B. Position, Farbe, Größe, Transparenz)

Transition

• wird ausgelöst, wenn sich der Wert einer Eigenschaften für ein Element ändert
• Zustandsänderung nicht direkt, sondern über einen definierten Zeitraum (Übergangsanimation)
• auch für mehrere Eigenschaften definierbar, durch Komma getrennt

Weitere Informationen:

An Interactive Guide to CSS Transitions by Josh Comeau

Transition am Element deklarieren:

Code/* Selektor */ {
  /* Deklarationen */
  transition: /* Eigenschaft */ /* Anzahl Sekunden */;
  /* weitere Eigenschaften: z. B. transition-timing-function mit linear, ease, etc. */
}

❮❯HTML<p>test</p>

❮❯CSSp {
  border: 1px solid black;
  width: fit-content;
  background-color: yellow;
  padding: 10px;
  transition: background-color 1s, padding 2s ease;
}

p:hover {
  background-color: red;
  padding: 30px;
}

Animation

• beliebig viele Styles können beliebig oft geändert werden

Animation definieren:

Code@keyframes animationName {
  from {/* Deklarationen */}
  to {/* Deklarationen */}
  /* alternativ Prozentwerte */
}

/* Selektor */ {
  /* Deklarationen */
  animation-name: animationName;
  animation-duration: /* Anzahl Sekunden */;
  /* weitere Eigenschaften, z. B. animation-delay, animation-iteration-count */
}

❮❯HTML<p>test</p>

❮❯CSS@keyframes pulse {
  20% {
    padding: 30px;
    background-color: red;
  }
}
p {
  border: 1px solid black;
  width: fit-content;
  background-color: yellow;
  padding: 10px;
  animation: pulse 2s;
  animation-iteration-count: infinite;
}