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.
Initialwert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
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(<number [0,1]>, <number>, <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