CSS-Animationsfüllmodus-Eigenschaft
Übersetzungsergebnisse:
英[fɪl]
vt.& vi. (machen) voll vt (Gefühl) n. die Menge von... füllen; Damm füllenDritte Person Singular: Füllt Partizip Präsens: Füllt Partizip Perfekt: Füllt英[məʊd] 美[moʊd]
n Zustand; Mode; Modus;
CSS-Animationsfüllmodus-EigenschaftSyntax
animation-fill-mode Was bedeutet das?
animation-fill-mode ist eine Animationseigenschaft von CSS, die verwendet wird, um anzugeben, ob der Animationseffekt vor oder nach der Wiedergabe der Animation sichtbar ist.
Funktion: Das Attribut animation-fill-mode gibt an, ob der Animationseffekt vor oder nach dem Abspielen der Animation sichtbar ist.
Syntax: animation-fill-mode: none |. vorwärts Wenn die Animation abgeschlossen ist, behalten Sie den letzten Eigenschaftswert (definiert im letzten Keyframe) bei. „backward“ wendet den Starteigenschaftswert (definiert im ersten Keyframe) an, bevor die Animation für einen durch „animation-delay“ angegebenen Zeitraum angezeigt wird. Es werden sowohl Vorwärts- als auch Rückwärtsfüllmodi angewendet.
Hinweis: Internet Explorer 9 und frühere Versionen unterstützen das Attribut „animation-fill-mode“ nicht.
CSS-Animationsfüllmodus-EigenschaftBeispiel
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:2; animation-fill-mode:forwards; /* Safari 和 Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:2; -webkit-animation-fill-mode:forwards; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p> <div></div> </body> </html>
Instanz ausführen »
Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen
Beliebte Empfehlungen
- „Trapped Alien“ CSS-Kunst und Animation
- Alle Layup- und Dunk-Animationsanforderungen für NBA 2K25
- Debug-Modus: Django Docker Pycharm
- Alle Anforderungen an den Dribbelstil und die Bewegungsanimation von NBA 2K25
- Begrenzter $MODE Airdrop – Fordern Sie jetzt Ihren an!
- So melden Sie sich im kostenlosen Facebook-Modus an