Play animation only on hover

#css #webdev #tutorial #productivity

Recently, I came across a situation where I had to animate a element only on hover. On browsing the internet for some amount of time, I found a very easy and reliable way to achieve this.

There is a built in CSS property to do this animation-play-state which tells the browser should the animation be running or paused.

I used it in combination with :hover to play animation only on hover.

Here is the code example

HTML

<div>
   <p className='figure'></p>
</div>

CSS

.figure {
  width: 200px;
  height: 200px;
  background-color: aqua;
  animation: change 1s infinite;
  animation-play-state: paused;
}

@keyframes change {
  from {
    background-color: red;
  }

  to {
    background-color: pink;
  }
}

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