Animation play state property (animation-play-state)

The animation-play-state property may specify when or if to pause an animation, freezing the element in its current state, and when to continue.

Syntax:

selector {

animation-play-state: paused | running | initial | inherit;

}

Values:

The animation-play-state property accepts the following values:

running; This is the default state. The animation runs normally and if it’s been paused, it resumes from the current point of the cycle.
paused; The animation stops running and the element(s) continue to display in the state they were in when the animation was being paused.
initial, inherit

NOTE: You will always need some sort of a trigger to pause an animation. One of the simplest triggers is the :hover pseudo-class.

Example

The animation-play-state property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
   margin-top:40px;
}
div {
    position: relative; top:10px; left:50px;
    width: 30px; height: 30px; padding:20px;
    background-color: #ff5555; color:#ff5555;
    border:3px outset red; border-radius:60px 60px;
    animation: animation 1s ease-in-out infinite;
    animation-delay: 1s;
        /* ADD proprietary selectors if needed */
}
div:hover {
    color:#222; font-weight:bold;
    animation-play-state: paused;
}
@keyframes animation {
    from { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.2); }
    to { transform: scale(1); }
}
</style>
</head>
  
<body>

<h3>The animation-play-state uses 'pause' value and :hover class</h3>

<div>paused</div>

<h2>Hover above the circle</h2>

</body>
</html>

›› go to examples ››

Animation play state property (animation-play-state)

Syntax:

Values:

Example

The animation-play-state property example:

Comments

About

Contact

Get Connected