CSS 监听动画

在网页开发中，动画效果是非常常见的一种交互方式，而通过CSS监听动画的方式可以让我们更好地控制动画的执行过程，实现更加丰富的交互效果。本文将详细介绍如何使用CSS监听动画，包括动画开始、结束、暂停、继续等事件。

1. 监听动画开始事件

在CSS中，我们可以通过animationstart事件来监听动画开始的时刻，从而在动画开始时执行一些操作。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画开始事件</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('动画开始了！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当动画开始时，控制台会输出动画开始了！，这样我们就可以在动画开始时执行一些自定义的操作。

2. 监听动画结束事件

除了监听动画开始事件，我们还可以通过animationend事件来监听动画结束的时刻，从而在动画结束时执行一些操作。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画结束事件</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('动画结束了！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当动画结束时，控制台会输出动画结束了！，这样我们就可以在动画结束时执行一些自定义的操作。

3. 监听动画暂停事件

有时候我们希望用户可以手动暂停动画，这时候就可以通过animationiteration事件来监听动画暂停的时刻。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画暂停事件</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">暂停动画</button>
<script>
    const box = document.querySelector('.box');
    const pauseBtn = document.getElementById('pauseBtn');

    pauseBtn.addEventListener('click', () => {
        box.style.animationPlayState = 'paused';
        console.log('动画已暂停！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当点击按钮暂停动画时，控制台会输出动画已暂停！，这样我们就可以在动画暂停时执行一些自定义的操作。

4. 监听动画继续事件

除了监听动画暂停事件，我们还可以通过animationiteration事件来监听动画继续的时刻。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画继续事件</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">暂停动画</button>
<button id="resumeBtn">继续动画</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('动画已暂停！');
    });

    resumeBtn.addEventListener('click', () => {
        box.style.animationPlayState = 'running';
        console.log('动画已继续！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当点击按钮继续动画时，控制台会输出动画已继续！，这样我们就可以在动画继续时执行一些自定义的操作。

5. 监听动画重复事件

有时候我们希望动画可以重复执行，这时候就可以通过animationiteration事件来监听动画重复的时刻。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画重复事件</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('动画重复了！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当动画重复执行时，控制台会输出动画重复了！，这样我们就可以在动画重复时执行一些自定义的操作。

6. 监听动画取消事件

有时候我们希望可以手动取消动画，这时候就可以通过animationcancel事件来监听动画取消的时刻。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画取消事件</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">取消动画</button>
<script>
    const box = document.querySelector('.box');
    const cancelBtn = document.getElementById('cancelBtn');

    cancelBtn.addEventListener('click', () => {
        box.style.animation = 'none';
        console.log('动画已取消！');
    });
</script>
</body>
</html>

Output:

在上面的示例中，当点击按钮取消动画时，控制台会输出动画已取消！，这样我们就可以在动画取消时执行一些自定义的操作。

7. 监听动画暂停、继续、取消事件的综合示例

下面是一个综合示例，演示了如何监听动画的暂停、继续和取消事件，并在控制台输出相应的信息：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听动画暂停、继续、取消事件</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">暂停动画</button>
<button id="resumeBtn">继续动画</button>
<button id="cancelBtn">取消动画</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('动画已暂停！');
    });

    resumeBtn.addEventListener('click', () => {
        box.style.animationPlayState = 'running';
        console.log('动画已继续！');
    });

    cancelBtn.addEventListener('click', () => {
        box.style.animation = 'none';
        console.log('动画已取消！');
    });
</script>
</body>
</html>

Output: