animation

Übersicht

Die CSS Eigenschaft animation fasst die folgenden Werte zusammen: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count und animation-direction.

Eine Beschreibung der animierbaren CSS Eigenschaften ist verfĂŒgbar; es sollte auch angemerkt werden, dass diese Beschreibung auch fĂŒr CSS ÜbergĂ€nge gilt.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret

Syntax

/* @keyframes Dauer | Timingfunktion | Verzögerung |
   Anzahl der Iterationen | Richtung | FĂŒllmodus | Abspielstatus | Name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */
  animation: 3s linear 1s slidein;

/* @keyframes Dauer | Name */
  animation: 3s slidein;

Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit <time> wird als animation-duration interpretiert, der zweite als animation-delay.

Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um animation-name Werte von anderen SchlĂŒsselwörtern zu unterscheiden. Beim Parsen mĂŒssen Werte von SchlĂŒsselwörtern, die fĂŒr Eigenschaften außer animation-name gĂŒltig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, fĂŒr diese Eigenschaften anstatt fĂŒr animation-name verwendet werden. Zudem mĂŒssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den FĂ€llen ausgegeben werden, in denen es nötig ist, einen animation-name, der ein gĂŒltiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusĂ€tzlichen FĂ€llen ausgegeben werden.

Formale Syntax

<single-animation>#
wobei 
<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
wobei 
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>
wobei 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
wobei 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Beispiele

Siehe CSS Animationen.

Zylonenauge

Unter BerĂŒcksichtigung aller browserspezifischen PrĂ€fixe ist hier eine Zylonenauge-Animation, die lineare FarbverlĂ€ufe und Animationen verwendet, die in allen Browsern funktioniert:

<div class="view_port">
  <div class="polling_message">
    Warte auf Nachrichten
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: move_eye 4s linear 0s infinite alternate;
     -moz-animation: move_eye 4s linear 0s infinite alternate;
       -o-animation: move_eye 4s linear 0s infinite alternate;
          animation: move_eye 4s linear 0s infinite alternate;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

Spezifikationen

Spezifikation Status Kommentar
CSS Animations Level 1
Die Definition von 'animation' in dieser Spezifikation.		 Arbeitsentwurf UrsprĂŒngliche Definition

Browser KompatibilitÀt

BCD tables only load in the browser

Siehe auch