Eigenschap animation-play-state
De eigenschap animation-play-state maakt het mogelijk
om de status van een animatie in te stellen: wordt afgespeeld
of staat gepauzeerd.
Syntaxis
selector {
animation-play-state: paused | running;
}
Waarden
| Waarde | Beschrijving |
|---|---|
paused |
De animatie staat gepauzeerd. |
running |
De animatie wordt afgespeeld. |
Standaardwaarde: running.
Voorbeeld
In dit voorbeeld start de animatie wanneer de muis over het element beweegt, en stopt wanneer de muis van het element af wordt bewogen:
<div id="elem"></div>
@keyframes move {
from {
width: 200px;
}
to {
width: 400px;
}
}
#elem {
animation-play-state: paused;
animation-duration: 1s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
height: 50px;
}
#elem:hover {
animation-play-state: running;
}
:
Voorbeeld . Hoveren over een ander element
En nu start de animatie door met de muis over een ander element te hoveren, en bij het weghalen van de muis - stopt het:
<div id="target"></div>
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#target {
border: 1px solid red;
margin-bottom: 10px;
width: 50px;
height: 50px;
}
#elem {
animation-play-state: paused;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
#target:hover + #elem {
animation-play-state: running;
border: 1px solid green;
}
:
Zie ook
-
de eigenschap
animation-name,
die de naam van de animatie instelt -
de eigenschap
animation-duration,
die de duur van de animatie instelt -
de eigenschap
animation-delay,
die de vertraging vóór het uitvoeren van de animatie instelt -
de eigenschap
animation-timing-function,
die de snelheid van het uitvoeren van de animatie instelt -
de eigenschap
animation-iteration-count,
die het aantal herhalingen van de animatie instelt -
de eigenschap
animation-direction,
die de richting van de animatie instelt -
de eigenschap
animation-fill-mode,
die de status van de animatie instelt -
de eigenschap
animation,
dat een verkorte weergave is voor animaties -
de regel
@keyframes,
die de keyframes van de animatie instelt -
vloeiende overgangen
transition, die een animatie vertegenwoordigen door over een element te hoveren