Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Play and Pause CSS Animations using CSS Custom Properties?
In CSS, animation is an effective way to add some visual flair to the website. However, sometimes we want to have more control over when and how these animations play. Here, we will explore how to play and pause CSS animations using CSS custom properties.
Before we go ahead, we should know that CSS animations can be created using keyframes or by transitioning between two or more states.
Syntax
@keyframes animation-name {
/* define the animation steps */
}
selector {
animation-play-state: running | paused;
}
We define the animation by giving it a name and using the @keyframes keyword. Within the curly braces, we define the steps of the animation using percentage or keyword values.
Play and Pause Animations in CSS
In CSS, Play and pause animations refer to the ability to control the animated element. It is a way to add movement and visual interest to a website.
Play and pause animations allow us to control when and how these animations play. This can be very useful if we want to give the user the ability to pause an animation if they need to focus on content.
In CSS, we can use the animation-play-state property to control whether an animation is running or paused. By default, the animation-play-state property is set to running, which means the animation will play automatically when the page loads. However, we can change the value of this property using CSS to start or stop an animation at any time.
Method 1: Using Hover to Control Animation
Below is an example of how to create a simple sliding animation that pauses on hover
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding: 20px;
}
.box {
display: flex;
height: 80px;
width: 80px;
border-radius: 10%;
color: white;
background-color: #4CAF50;
position: relative;
animation: slide-animation 4s infinite alternate;
align-items: center;
justify-content: center;
font-size: 12px;
cursor: pointer;
}
.box:hover {
animation-play-state: paused;
}
@keyframes slide-animation {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Hover to Pause Animation</h2>
<div class="box">Hover me!</div>
</body>
</html>
A green box slides back and forth across the screen. When you hover over it, the animation pauses. When you move the mouse away, it resumes.
Method 2: Using CSS Custom Properties with Checkbox
Here is an example using CSS custom properties to control animation with a checkbox
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
padding: 20px;
}
.container {
margin-top: 20px;
}
.box {
background-color: #ff6b6b;
height: 80px;
width: 80px;
border-radius: 50%;
margin: 20px auto;
--animation-state: running;
}
.animated-box {
animation: rotate-animation 3s linear infinite;
animation-play-state: var(--animation-state);
}
#pause-toggle:checked ~ .container .animated-box {
--animation-state: paused;
}
@keyframes rotate-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
label {
font-size: 18px;
cursor: pointer;
color: #333;
}
</style>
</head>
<body>
<input type="checkbox" id="pause-toggle" />
<label for="pause-toggle">Check to pause animation</label>
<div class="container">
<div class="box animated-box"></div>
</div>
</body>
</html>
A red circular box rotates continuously. When you check the checkbox, the rotation pauses. Unchecking the box resumes the animation.
Conclusion
Using CSS custom properties to play and pause CSS animations provides a simple and efficient way to control animations on web pages. The hover method offers immediate interaction, while the checkbox method gives users persistent control over animation state.
4K+ Views
