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 ✌
Top comments (0)