在不重置超时持续时间的情况下制作标签动画

要在不重置超时持续时间的情况下制作标签动画，可以使用CSS动画和JavaScript来实现。以下是一个简单的示例，展示了如何实现这一目标：

基础概念

CSS动画：通过CSS定义动画效果，可以控制元素的样式变化。
JavaScript：用于控制动画的开始、暂停和恢复。

优势

性能优化：CSS动画由浏览器的渲染引擎处理，通常比JavaScript动画更高效。
易于实现：CSS动画可以通过简单的样式定义来实现复杂的动画效果。
非阻塞：CSS动画不会阻塞主线程，有助于保持页面的响应性。

类型

关键帧动画：使用@keyframes规则定义动画的关键帧。
过渡动画：通过transition属性实现简单的状态变化动画。

应用场景

标签动画：如标签页切换时的动画效果。
加载指示器：显示加载状态的动画。
交互反馈：用户操作后的视觉反馈。

示例代码

以下是一个简单的标签动画示例，使用CSS动画和JavaScript控制动画的开始和暂停。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tag-container">
        <div class="tag" id="tag1">Tag 1</div>
        <div class="tag" id="tag2">Tag 2</div>
        <div class="tag" id="tag3">Tag 3</div>
    </div>
    <button onclick="startAnimation()">Start Animation</button>
    <button onclick="pauseAnimation()">Pause Animation</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.tag-container {
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}

.tag {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    animation: tagAnimation 3s linear infinite;
}

@keyframes tagAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

JavaScript (script.js)

let animationId;

function startAnimation() {
    const tags = document.querySelectorAll('.tag');
    tags.forEach(tag => {
        tag.style.animationPlayState = 'running';
    });
}

function pauseAnimation() {
    const tags = document.querySelectorAll('.tag');
    tags.forEach(tag => {
        tag.style.animationPlayState = 'paused';
    });
}