English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 Animation-fill-Die mode-Eigenschaft bestimmt, wie CSS-Animationen vor und nach ihrer Ausführung auf ihr Ziel angewendet werden.
Nachstehende Tabelle zusammenfasst die Verwendungskontexte und Versionshistorie dieses Attributes.
| Standardwert: | none |
|---|---|
| Geeignet für: | Alle Elemente::before und::after Pseudo-Element |
| Vererbung: | Keine |
| Animierbar: | Nein.Siehe auch Animationseigenschaft. |
| Version: | CSS3Neue Funktion |
| JavaScript-Syntax: | object.style.animationFillMode="forwards" |
Die Syntax dieses Attributes ist wie folgt:
Animation-fill-mode: none | forwards | backwards | both | initial | inherit
Der folgende Beispiel zeigt, wie man die animation verwendet.-fill-mode-Eigenschaft.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-Animation-name: moveit;
-webkit-Animation-duration: 4s;
-webkit-Animation-fill-mode: forwards;
Animation-name: moveit;
Animation-duration: 4s;
Animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Testen Sie es heraus‹/›Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.
| Wert | Beschreibung |
|---|---|
| none | Die Animation wendet vor oder nach der Ausführung keine Stile auf das Ziel an. |
| forwards | Nach dem Ende der Animation（bestimmtAnimation-iteration-count），die Animation wendet die Eigenschaftswerte am Ende der Animation an. |
| backwards | Die Animation wendet die Eigenschaftswerte an, die in den Schlüsselbildern definiert sind, die vonAnimation-delayDie erste Iteration der Animation beginnt im Zeitraum, den die Eigenschaft definiert. Diese sind die Werte der from-Schlüsselbilder（Animation-directionFür normal oder alternate）oder zu den Werten der Schlüsselbilder（Animation-directionFür reverse oder alternate-reverse）. |
| both | Die Animation folgt den Regeln für vorwärts und rückwärts, was die Animationseigenschaften in beiden Richtungen erweitert. |
| initial | Setzen Sie diesen Wert auf seinen Standardwert. |
| inherit | Wenn angegeben, verwendet der verknüpfte Element seine Eltern animation-fill-Berechneter Wert der mode-Eigenschaft. |
Animation-fill-mode-Eigenschaft und Browserkompatibilität, alle gängigen Browser unterstützen diese Eigenschaft.
|
Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3Animation.
Verwandte Eigenschaften und Regeln: Animation,Animation-name,Animation-duration,Animation-timing-function,Animation-delay,Animation-iteration-count,Animation-direction,Animation-play-state,@keyframes.