Animationen

CSS @Keyframes

Mit der Funktion @Keyframes lassen sich Objekte auf einer Webseite Animieren. Diese Objekte können sich dann wie gewünscht auf der Seite bewegen, drehen und blinken.

#example1 {
 @keyframes stempel1 {
  0%{
   transform: scale(1) rotate(10deg)
  }
  50%{
   transform: scale(1.5) rotate(30deg);
  }
  100%{
   transform: scale(1) rotate(10deg)
  }
 }
}

Genehmigt

Animation Delay

Mit der Funktion "animation-delay" wird die Verzögerung angegeben, nach der die Animation beginnen soll, nachdem zum Beispiel die Webseite geladen wurde.
Die Zeit wird hierbei in Sekunden angegeben.

#example2 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-delay: 5s;
 }
}

Animation Duration

Mit der Funktion "animation-duration" kann die Zeitspanne angegeben werden, die die Animation laufen soll.
Auch hier wird die Zeit in Sekunden angegeben.

#example3 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-druration: 5s;
 }
}

Example

Example

Bei diesem Beispiel dauert die erste Animation 5 Sekunden und die zweite 10 Sekunden.

Animation Iteration Count

Durch die Funktion "animation-iteration-count" lässt sich die Anzahl an Durchläufen angeben. Dadurch läuft die Animation eine bestimmte Anzahl Malen.

#example4 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-iteration-count: infinit;
 }
}

Animation Direction

Die "animation-direction" Funktion bringt die Möglichkeit mit sich, die Animation vorwärts oder Rückwärts abzuspielen. Es ist auch Möglich die Animation erst Vorwärts und dann Rückwärts oder andres herum abzuspielen.

#example5 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-direction: normal;
 }
}

Example

Example

Hier dreht sich die erste Animation nach rechts (normal) und die zweite nach links (reverse).

Animation Timing-Function

Mit "animation-timing-function" lässt sich bestimmen, ob sich die Animation am Anfang, am Ende oder in der Mitte schneller oder langsamer bewegt. Außerdem kann die Animation auch immer gleichschnell durchlaufen.

#example6 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-timing-function: linear;
 }
}

Example

Example

Die erste Animation bewegt sich immer gleich schnell (linear) und die zweite am Anfang und am Ende schneller als in der Mitte (ease).

Animation Fill-Mode

Durch die "animation-fill-mode" Funktion kann die Animation einen Style bekommen ohne das die Animation abgespielt wird. Es ist möglich zum Beispiel das erste oder letzte Bild als dauerhaften Style für die stillstehende Animation zu nehmen.

#example7 {
 #beispiel {
  position: relative;
  animation-name: stempel1;
  animation-fill-mode: forwards;
 }
}