RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/animation-play-state below:

animation-play-state · WebPlatform Docs

animation-play-state Summary

Defines whether an animation is running or paused.

Overview table

Initial value: running
Applies to: All elements, ::before and ::after pseudo-elements.
Inherited: No
Media: visual
Computed value: As specified.
Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

animation-play-state: paused
animation-play-state: running

Values

running: Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) state.
paused: Pauses the animation. A paused animation continues to display the current state of the animation.

Examples

The CSS uses the animation property and the @keyframes property as well as the animation-play-state property and more.

The example show how to create a counter like function. By using the “:checked” selector for radio buttons we toggle the animation states for the counter


#stopwatch_handles {
    margin-top: 0px;
}

#stopwatch_handles label {
    cursor: pointer;
    padding: 5px 5px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
input[name="handles"] {display: none;}


#stopbtn:checked~.stopwatch .numbers {
    animation-play-state: paused
}
#startbtn:checked~.stopwatch .numbers {
    animation-play-state: running
}


.moveten {
    animation: moveten 1s steps(10, end) infinite;
    animation-play-state: paused;
}

.movesix {
    animation: movesix 1s steps(6, end) infinite;
    animation-play-state: paused;
}


.second {
    animation-duration: 10s;
}
.tensecond {
    animation-duration: 60s;
}


@keyframes moveten {
    0% {top: 0;}
    100% {top: -300px;}
}


@keyframes movesix {
    0% {top: 0;}
    100% {top: -180px;}
}

A mobile-like interface featuring a keyframe-animated pulsing icon. When the application enters an interruption mode, the icon is paused and the page presents another panel to indicate that the animation is inactive.

div.selected {
    animation: pulse 0.5s infinite alternate running;
}

body.interrupt div.selected {
    animation-play-state: paused;
}

@keyframes pulse {
    from {
        transform : scale(1) translateX(0);
        opacity : 1;
    }
    to {
        transform : scale(0.75) translateX(0);
        opacity : 0.25;
    }
}

View live example

Usage

 Can also be a comma-separated list of play states, e.g., running, paused, running, where each play state is applied to the corresponding ordinal position value of the animation-name property.

Related specifications

CSS Animation: W3C Working Draft