CSS helps to animate HTML elements without using JavaScript. You can play and pause the animation applied to HTML elements using animation-play-state property of CSS.
The animation-play-state property has 2 values:
- paused – Pauses an ongoing animation.
- running – Starts a paused animation (default value).
Follow these steps :
- Create HTML file
- Create CSS file:
- Specify the position property for<div>tag.
- Use the animation property to mention the animation you want to give to the <div>tag.
- Use the animation-play-state property to play/pause the animation.
- Mention the keyframes properties ‘from’ and ‘to’ to mention the start and end of the animation.
Example 1: HTML and CSS code to play the animation.
HTML
<!DOCTYPE html> <html>
<head>
<style>
div {
position: relative;
animation: geeks 5s infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
@keyframes geeks {
from {
left: 0px;
}
to {
left: 100px;
}
}
</style>
</head>
<body>
<p>
Hover over the GeeksforGeeks
to run the animation.
</p>
<div>GeeksforGeeks</div>
</body>
</html>
|
Output:
Play animation when hovered
Example 2: HTML and CSS code to pause the animation.
HTML
<!DOCTYPE html> <html>
<head>
<style>
div {
position: relative;
animation: geeks 5s infinite;
}
div:hover {
animation-play-state: paused;
}
@keyframes geeks {
from {
left: 0px;
}
to {
left: 100px;
}
}
</style>
</head>
<body>
<p>
Hover over the GeeksforGeeks
to stop the animation.
</p>
<div>GeeksforGeeks</div>
</body>
</html>
|
Output:
Pause animation when hovered