Play animation only on hover

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; } 

That's it you got to know how to animate on hover.

Stay happy, Keep your surroundings clean,
Signing off Meet Bhalodiya,

Peace ✌