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

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

Aktivitätsstatus einer Animation

Steuert, ob eine Animation läuft oder nicht.

CSS-Eigenschaft: animation-play-state
KurzbeschreibungWerteStandardwertKategorieHinweis
Aktivitätsstatus einer Animation
  • running
  • paused
running
Allgemein:
Animierte Inhalte
CSS 3:
Animations
Neu in CSS 3
 

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:

  • running bewirkt, dass eine Animation abgespielt wird und ist der Standardwert.
  • paused stoppt 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.

Browserunterstützung von animation-play-state
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

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:



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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

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-play-state: paused;
    animation-play-state: paused;
}
/* Über paused wird die Animation angehalten. Dadurch wird in diesem Beispiel die Animation gar nicht abgespielt. */
Beispiel nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

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: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 nur für: Firefox
-moz-: 5W3C: 16
Opera
-o-: 11.6W3C: 12.1
Internet Explorer
W3C: 10
Safari
-webkit-: 4
Google Chrome
-webkit-: ?W3C: 19

Beispiel Nr. 3 So sieht's aus:

Blaue Kugel
 

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;    
}
Beispiel nur für: Safari
-webkit-: 4
Google Chrome
-webkit-: ?

Testbeispiel: Schreibweise mit
Vendor-Präfix

Rote Kugel
 

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;    
}
Beispiel nur für: Firefox
W3C: 16
Internet Explorer
W3C: 10
Opera
W3C: 12.1

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: 4.389 sec.

Browser-Marktanteile