Breaking News: Grepper is joining You.com. Read the official announcement!

animations play state css

Add Answer

Imran Khan answered on December 9, 2021 Popularity 7/10 Helpfulness 2/10

answer animations play state css

related values play state animation css

related animations play state css

animations play state css

Comment

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Popularity 7/10 Helpfulness 2/10 Language css

Source: developer.mozilla.org

Tags: css state

Link to this answer
Share Copy Link

Contributed on Dec 22 2022

Imran Khan

0 Answers Avg Quality 2/10

Closely Related Answers

values play state animation css

Comment

/* the animation-play-state can have 2 values: paused or running */

#myElement{
  animation: stuff;
  animation-play-state: running;
}

#myElement{
  animation: stuff;
  animation-play-state: paused;
}

Popularity 8/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: state css animation

Link to this answer
Share Copy Link

Contributed on Dec 09 2021

Cloudy Caribou

0 Answers Avg Quality 2/10

animations play state css

Comment

animation-play-state = 
  <single-animation-play-state>#  

<single-animation-play-state> = 
  running  |
  paused

Popularity 7/10 Helpfulness 1/10 Language css

Source: developer.mozilla.org

Tags: css state

Link to this answer
Share Copy Link

Contributed on Dec 22 2022

Imran Khan

0 Answers Avg Quality 2/10

animations play state css

Contents

More Related Answers

animations play state css

Closely Related Answers

values play state animation css

animations play state css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.