CSS-Eigenschaft: animation-play-state, Kategorien: Animierte Inhalte (allgemein), Animations (CSS 3)
Aktivitätsstatus einer Animation
Steuert, ob eine Animation läuft oder nicht.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Aktivitätsstatus einer Animation |
| running |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Animierte Inhalte (allgemein), Animations (CSS 3):
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- Aktuelle Seite: animation-play-state
- animation-timing-function
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
Folgendes ist beim Einsatz von animation-play-state zu beachten:
animation-play-state steuert, ob eine Animation läuft oder nicht.
Es stehen zwei Parameter zur Verfügung:
runningbewirkt, dass eine Animation abgespielt wird und ist der Standardwert.pausedstoppt eine Animation.
Interessant ist animation-play-state für die Steuerung über JavaScript.
Auf bestimmte Aktionen des Seitenbesuchers beispielsweise kann so eine Animation angehalten werden und
auch wieder fortgesetzt werden.
Die Animation wird an der Stelle fortgesetzt, an der sie angehalten wurde.
Im Beispiel Nr. 3 ist das Verhalten an ein Mouseover :hover geknüpft.
Fährt man mit der Maus über den umgebenden Kasten,
wird die Animation angehalten.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||
Hinweis
Das W3C hat zeitweilig überlegt, diese Eigenschaft auf dem Standard zu nehmen,
da andere Techniken geeigneter erschienen, diese Funktionalität abzubilden.
Allerdings scheint diese Überlegung hinfällig zu sein. animation-play-state ist als
feststehende Eigenschaft des CSS3-Standards einzustufen.
Weiterführende Informationen zu animation-play-state:
- W3C Spezifikation:
http://www.w3.org/TR/css3-animations/#animation-play-state
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
animation-name - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
animation-timing-function
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.examples {
width: 300px;
height: 300px;
border: 4px solid black;
}
/* Ü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 "infinite" (endlos)
und eine Länge (animation-duration) auf 4 Sekunden festgelegt. */
div.examples img {
position: relative;
-webkit-animation-name: move-ball;
animation-name: move-ball;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
/* Über die Keyframe-Regel wird die eigentliche Animation definiert. */
@-webkit-keyframes move-ball {
from {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 0px;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0px;
top: 200px;
}
to {
left: 0px;
top: 0px;
}
}
@keyframes move-ball {
from {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 0px;
}
50% {
left: 200px;
top: 200px;
}
75% {
left: 0px;
top: 200px;
}
to {
left: 0px;
top: 0px;
}
}
/* Ohne eine Angabe von animation-play-state wird die Animation kontinuierlich abgespielt.
Sie hört dann erst auf, wenn die Angabe von animation-iteration-count erreicht ist.*/
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-2 img {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* Über paused wird die Animation angehalten. Dadurch wird in diesem Beispiel die Animation gar nicht abgespielt. */Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3" class="examples">
<img src="img/ball-blau.png" alt="Blaue Kugel">
</div>CSS:
#example-3:hover img {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* In diesem Beispiel wird das Verhalten von animation-play-state deutlicher.
Die Animation wird abgespielt, wird der Kasten hingegen mit der Maus überfahren, wird die Animation angehalten. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="testcase-vendor">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
#testcase-vendor {
border: 4px solid black;
}
@-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: 3s;
}
#testcase-vendor:hover img {
-webkit-animation-play-state: paused;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">
<img src="img/ball.png" alt="Rote Kugel">
</div>CSS:
#testcase-standard {
border: 4px solid black;
}
@keyframes allmargin {
from {
margin: 0px;
}
50% {
margin: 100px;
}
to {
margin: 0px;
}
}
#testcase-standard img {
animation-name: allmargin;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#testcase-standard:hover img {
animation-play-state: paused;
}Testbeispiel: Standardschreibweise
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!