CSS-Animationsverzögerungseigenschaft
Übersetzungsergebnisse:
英[dɪˈleɪ ] US [dɪˈle]
n. Verzögerung; Verzögerung, Verzögerung vi. Verzögerung, Verzögerung Partizip Präsens: Verzögerung Vergangenheit: verzögert Partizip Perfekt: verzögertCSS-AnimationsverzögerungseigenschaftSyntax
Wie verwende ich das Animationsverzögerungsattribut?
animation-delay-Attribut definiert, wann die Animation beginnt. Die grundlegende Syntax ist: Animation-Delay: Zeit. Der Zeitwert wird in Sekunden (s) oder Millisekunden (ms) gemessen; negative Werte sind zulässig, zum Beispiel: -2s bewirkt, dass die Animation sofort startet, überspringt jedoch 2 Sekunden, um in die Animation einzusteigen.
Funktion: animation-delay-Attribut definiert, wann die Animation beginnt. Der Wert für die Animationsverzögerung wird in Sekunden oder Millisekunden angegeben.
Syntax: animation-delay: time;
Beschreibung: time Optional. Definiert die Zeit in Sekunden oder Millisekunden, die gewartet werden soll, bevor die Animation beginnt. Der Standardwert ist 0, negative Werte sind zulässig, zum Beispiel: -2s bewirkt, dass die Animation sofort startet, überspringt jedoch 2 Sekunden, um in die Animation einzutreten.
Hinweis: Internet Explorer 9 und frühere Versionen unterstützen das Animationsverzögerungsattribut nicht.
CSS-AnimationsverzögerungseigenschaftBeispiel
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; animation-delay:2s; /*Safari and Chrome*/ -webkit-animation:mymove 5s infinite; -webkit-animation-delay:2s; } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-delay 属性。</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
- IAMDOG kündigt Verzögerung für sein Token Generation Event (TGE) und Airdrop an
- Alle Layup- und Dunk-Animationsanforderungen für NBA 2K25
- Alle Anforderungen an den Dribbelstil und die Bewegungsanimation von NBA 2K25
- Fly-to-Cart-Animation mit reinem Javascript in wenigen Zeilen.
- Ein einzelner Fortschritt verwendet reines CSS, um Animationseffekte zu erzielen