CSS Animation Listener
CSS Animation Monitoring
In web development, animation effects are a very common interactive method. Using CSS animation monitoring allows us to better control the animation execution process and achieve richer interactive effects. This article will detail how to use CSS animation monitoring, including animation start, end, pause, and resume events.
1. Listening for the Animation Start Event
In CSS, we can use the animationstart event to listen for the start of an animation and perform actions when the animation begins. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listen for animation start event</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
box.addEventListener('animationstart', () => {
console.log('Animation starts!');
});
</script>
</body>
</html>
Output:
In the above example, when the animation starts, the console will output Animation started!, allowing us to perform some custom operations when the animation starts.
2. Monitoring the Animation End Event
In addition to monitoring the animation start event, we can also monitor the animation end time using the animationend event, allowing us to perform some operations when the animation ends. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listen for animation end event</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: myAnimation 2s;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
box.addEventListener('animationend', () => {
console.log('Animation is over!');
});
</script>
</body>
</html>
Output:
In the above example, when the animation ends, the console will output Animation is over!, so we can perform some custom operations when the animation ends.
3. Listening for Animation Pause Events
Sometimes we want the user to manually pause the animation. In this case, we can use the animationiteration event to listen for the paused animation. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listen for animation pause event</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<button id="pauseBtn">Pause animation</button>
<script>
const box = document.querySelector('.box');
const pauseBtn = document.getElementById('pauseBtn');
pauseBtn.addEventListener('click', () => {
box.style.animationPlayState = 'paused';
console.log('Animation paused!');
});
</script>
</body>
</html>
Output:
In the example above, when the button is clicked to pause the animation, the console outputs Animation Paused!. This allows us to perform custom actions when the animation is paused.
4. Listening for Animation Resume Events
In addition to listening for animation pause events, we can also use the animationiteration event to listen for when the animation resumes. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listen for animation continue event</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: yellow;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<button id="pauseBtn">Pause animation</button>
<button id="resumeBtn">Resume animation</button>
<script>
const box = document.querySelector('.box');
const pauseBtn = document.getElementById('pauseBtn');
const resumeBtn = document.getElementById('resumeBtn');
pauseBtn.addEventListener('click', () => {
box.style.animationPlayState = 'paused';
console.log('Animation paused!');
});
resumeBtn.addEventListener('click', () => {
box.style.animationPlayState = 'running';
console.log('Animation resumed!');
});
</script>
</body>
</html>
Output:
In the example above, when the button is clicked to continue the animation, the console will output Animation Continued!, allowing us to perform custom actions when the animation continues.
5. Listening for Animation Repeat Events
Sometimes we want an animation to repeat. In this case, we can use the animationiteration event to monitor the moment the animation repeats. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listening for animation repeat events</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: purple;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
box.addEventListener('animationiteration', () => {
console.log('Animation repeated!');
});
</script>
</body>
</html>
Output:
In the above example, when the animation repeats, the console will output Animation repeated!, so we can perform some custom actions when the animation repeats.
6. Listening for Animation Cancel Events
Sometimes we want to manually cancel an animation. In this case, we can use the animationcancel event to listen for the animation cancellation event. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Listening for animation cancel events</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<button id="cancelBtn">Cancel animation</button>
<script>
const box = document.querySelector('.box');
const cancelBtn = document.getElementById('cancelBtn');
cancelBtn.addEventListener('click', () => {
box.style.animation = 'none';
console.log('Animation canceled!');
});
</script>
</body>
</html>
Output:
In the above example, when the button is clicked to cancel the animation, the console will output Animation canceled!, allowing us to perform some custom actions when the animation is canceled.
7. Comprehensive example of monitoring animation pause, resume, and cancel events
The following is a comprehensive example that demonstrates how to monitor animation pause, resume, and cancel events and output the corresponding information in the console:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monitoring animation pause, resume, and cancel events</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="box"></div>
<button id="pauseBtn">Pause animation</button>
<button id="resumeBtn">Resume animation</button>
<button id="cancelBtn">Cancel animation</button>
<script>
const box = document.querySelector('.box');
const pauseBtn = document.getElementById('pauseBtn');
const resumeBtn = document.getElementById('resumeBtn');
const cancelBtn = document.getElementById('cancelBtn');
pauseBtn.addEventListener('click', () => {
box.style.animationPlayState = 'paused';
console.log('Animation paused!');
});
resumeBtn.addEventListener('click', () => {
box.style.animationPlayState = 'running';
console.log('Animation resumed!');
});
cancelBtn.addEventListener('click', () => {
box.style.animation = 'none';
console.log('Animation canceled!');
});
</script>
</body>
</html>
Output:
In the above example, we use three buttons to pause, resume, and cancel the animation, outputting corresponding information to the console.
Conclusion
Through this article, we learned how to use CSS to listen for animation start, end, pause, resume, repeat, and cancel events. These events can help us better control the animation process and achieve richer interactive effects.