Keyframe-Animations

CSS Animations

animierte Übergänge von einem Style zum nächsten
2 Komponenten:

  • Style, der die Animation beschreibt
  • Set von Keyframes, das Start, Ende und Zwischenposition der Animation festlegt

Wie geht das?

Das zu animierende Element bekommt die animation-Eigenschaft bzw. die Sub-Eigenschaft zugewiesen. So werden Timing und Dauer der Animation bestimmt – die eigentliche Darstellung der Animation wird nicht damit festgelegt, sondern mit den Keyframes (@keyframes).

animation:
animation-name: => @keyframe-Regel-Name
animation-duration
animation-timing-function
animation-delay
animation-direction
animation-iteration-count
animation-fill-mode
animation-play-state

@keyframes:
2 oder mehr keyframes erstellen
Jeder keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz: 0% - 100%

@-webkit-keyframes    nameYourAnimation {...}
@-moz-keyframes    nameYourAnimation {...}
@-o-keyframes    nameYourAnimation {...}
@keyframes {
    0% {opacity: 0;}    = from {opacity: 0;}
    100% {opacity: 1;}  = to {opacity: 1;}
}

#item {
 -webkit-animation: nameYourAnimation 5s infinite; // Safari 4+
 -moz-animation: nameYourAnimation 5s infinite; // Fx 5+
 -o-animation: nameYourAnimation 5s infinite; // Opera 12+
 animation: nameYourAnimation 5s infinite; // IE10+, Fx 29+
 }

mulitple steps:

@keyframes nameYourAnimation {
  0% {font-size: 10px;}
  30% {font-size: 15px;}
  100% {font-size: 12px;}
}
#item {
 animation: nameYourAnimation 2s infinite;
 }

wenn Anfang und Ende gleich sind, geht auch das:

@keyframes nameYourAnimation {
 0%, 100% {font-size: 12px;}
 50% {font-size: 15px;}
}

Calling keyframe animation with separate properties:

#item {
 animation-name: bounce;
 animation-duration: 4s; //Xs //Xms
 animation-iteration-count: 10; //X
 animation-direction: alternate; //normal //alternate
 animation-timing-function: ease-out; //ease //ease-out //ease-in //ease-in-out //linear //cubic-bezier
 animation-fill-mode: forwards; //forwards //backwards //both //none
 animation-delay: 2s; //Xs //Xms
}

Animation shorthand:
space-separate all the individual values
order doesn’t matter except when duration + delay are used, they need to be in that order