Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: animation-delay, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)

Startverzögerung einer Animation

Steuert, nach wie viel (Milli-)Sekunden eine Animation startet.

CSS-Eigenschaft: animation-delay
KurzbeschreibungWerteStandardwertKategorieHinweis
Startverzögerung einer Animation
  • <time>
0
Allgemein:
Animierte Inhalte
CSS 3:
Animations
Neu in CSS 3
 

Folgendes ist beim Einsatz von animation-delay zu beachten:

animation-delay steuert die Startverzögerung einer Animation. Dabei werden Zeitwerte in s für Sekunden oder ms für Millisekunden erwartet. Die über die @keyframes- bzw. @-webkit-keyframes-Regel definierte Animation beginnt nach der angegebenen Verzögerung.

Die Startverzögerung bezieht sich lediglich auf den Start der Animation, und nicht auf jede einzelne Wiederholung. Nach der ersten Wiederholung geht die Animation sofort in die zweite (falls über animation-iteration-count mehr als 1 Wiederholung definiert ist).

Bei animation-delay von 0s startet die Animation ohne Verzögerung, also sofort.

Für animation-delay sind negative Zeitwerte zulässig und wirkt sich als "Offset" aus. Das bedeutet, die Animation wird an die Stelle "vorgespult", die beim Zeitwert von animation-delay erreicht wäre.

Animationen und animation-delay werden aktuell (Februar 2013) von Firefox und Opera (ab der Version 12.10) in der Standardschreibweise, von Google Chrome und Safari in der Schreibweise mit dem Vendor-Präfix -webkit- unterstützt.

Weitere Informationen über Animationen sind (in Kürze) unter animation zu finden.

Browserunterstützung von animation-delay
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20
-webkit-
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6
-webkit-
Version: 10Version: 11Version: 12
nj

Weiterführende Informationen zu animation-delay:



Beispiele

HTML:

<div id="example-1" class="examples">
    <img src="img/ball-blau.png" alt="Blaue Kugel">
</div>

CSS:

/* Der schwarze Rahmen für die Box und die Animation an sich werden mit den folgenden Zeilen definiert.
Diese wirken auf alle folgende Beispiele. */            
div {
    border: 4px solid black;
    width: 300px;
}
/* Über die Keyframe-Regel wird die eigentliche Animation definiert. */
@-webkit-keyframes move-ball {
    from {
        left: 0px;
    }
    50% {
        left: 200px;
    }
    to {
        left: 0px;
    }
}            
@keyframes move-ball {
    from {
        left: 0px;
    }
    50% {
        left: 200px;
    }
    to {
        left: 0px;
    }
}
/* Über den "identifier" (hier "move-ball") und die CSS-Eigenschaft animation-name (bzw. -webkit-animation-name für die Webkit-Browser) wird die Animation zugewiesen. 
Für die Beispiele auf dieser Seite wird die Wiederholung (animation-iteration-count) auf 3 und eine Länge (animation-duration) auf 5 Sekunden festgelegt. */
div.examples img {
    position: relative;
 
    -webkit-animation-name: move-ball;
    animation-name: move-ball;
 
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
 
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
 }
/* Hier wird die Startverzögerung der Animation auf 2 Sekunden gesetzt. Safari und Chrome benötigt das Vendor-Präfix -webkit-, damit animation-delay (sowie alle CSS-Eigenschaftenn aus dem Modul "Animation") unterstützt wird. */
#example-1 img {
   -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
Beispiel nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 1 So sieht's aus:

Blaue Kugel
 

HTML:

<div id="example-2" class="examples">
    <img src="img/ball-blau.png" alt="Blaue Kugel">
</div>

CSS:

#example-2 img {
   -webkit-animation-delay: 2000ms;
    animation-delay: 2000ms;
}
/* In diesem Beispiel wird die alternative Schreibweise mit der Einheit "ms" (Millisekunden) verwendet. */
Beispiel nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

Blaue Kugel
 

HTML:

<div id="example-3" class="examples">
    <img src="img/ball-blau.png" alt="Blaue Kugel">
</div>

CSS:

#example-3 img {
   -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
/* Eine Animation mit einem 0-Wert für animation-delay startet sofort. 
0 entspricht dem Standardwert und greift, falls animation-delay nicht ausdrücklich definiert ist. */
Beispiel nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

Blaue Kugel
 

HTML:

<div id="example-4" class="examples">
    <img src="img/ball-blau.png" alt="Blaue Kugel">
</div>

CSS:

#example-4 img {
   -webkit-animation-delay: -2.5s;
    animation-delay: -2.5s;
}
/* Für animation-delay sind auch negative Werte zulässig. 
In diesem Fall gilt animation-delay als "Offset", sprich: die Animation startet an bzw. "springt" an die Stelle, 
welche die Animation nach der Zeit von animation-delay bereits erreicht hätte. */
Beispiel nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 4 So sieht's aus:

Blaue Kugel
 

HTML:

<div id="example-5" class="examples">
    <img src="img/ball-blau.png" alt="Blaue Kugel">
</div>

CSS:

@-webkit-keyframes addmargin {
    from {
        margin-top: 0px;
    }
    50% {
        margin-top: 150px;
    }
    to {
        margin-top: 0px;
    }
}            
@keyframes addmargin {
    from {
        margin-top: 0px;
    }
    50% {
        margin-top: 150px;
    }
    to {
        margin-top: 0px;
    }
}
/* In diesem Beispiel wird eine zweite Animation definiert. 
Über animation-name und die beiden Identifier "move-ball" und "addmargin" (getrennt durch ein Komma) werden beide Animationen dem blauen Ball zugewiesen. */
#example-5 img {
    -webkit-animation-name: move-ball, addmargin;
    animation-name: move-ball, addmargin;
 
   -webkit-animation-delay: 1s, 6s;
    animation-delay: 1s, 6s;
}
/* Für beide Animationen wird eine individuelle Startverzögerung definiert. Auch hier sind die Werte durch ein Komma getrennt.
Die erste Animation (das Pendeln von links nach rechts) startet nach 1 Sekunde, die zweite (Abstand nach oben) beginnt nach 6 Sekunden.
Also dann, wenn die erste Animation (Verzögerung von 1 Sekunde und Dauer von 5 Sekunden) einmal durchlaufen ist. 
Da beide Animationen auf 3 Wiederholungen gesetzt sind, läuft die zweite Animation am Ende einmal alleine. */
Beispiel nur für: FirefoxOperaInternet Explorer
W3C: 10
SafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

Blaue Kugel
 

HTML:

<div id="testcase-vendor">
    <img src="img/ball.png" alt="Rote Kugel">
</div>

CSS:

@-webkit-keyframes allmargin {
    from {
        margin: 0px;
    }
    50% {
        margin: 100px;
    }
    to {
        margin: 0px;
    }
}            
#testcase-vendor img {
    -webkit-animation-name: allmargin;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-duration: 10s;
 
    -webkit-animation-delay: 2s;    
}
Beispiel nur für: SafariGoogle Chrome

Testbeispiel: Schreibweise mit
Vendor-Präfix

Rote Kugel
 

HTML:

<div id="testcase-standard">
    <img src="img/ball.png" alt="Rote Kugel">
</div>

CSS:

@keyframes allmargin {
    from {
        margin: 0px;
    }
    50% {
        margin: 100px;
    }
    to {
        margin: 0px;
    }
}            
#testcase-standard img {
    animation-name: allmargin;
    animation-iteration-count: infinite;    
    animation-duration: 10s;
 
    animation-delay: 2s;    
}
Beispiel nur für: FirefoxInternet Explorer
W3C: 10
Opera

Testbeispiel: Standardschreibweise

Rote Kugel
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 5.735 sec.

Browser-Marktanteile