一个元素可以同时运行多个CSS动画
通过
animation属性使用逗号分隔多个动画值来实现每个动画可以有自己的持续时间、延迟、重复次数和时间函数
-
可以复制自行查看效果，希望可以帮到你
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS多重动画演示</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; margin: 0; padding: 20px; } h1 { text-align: center; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .subtitle { text-align: center; margin-bottom: 40px; font-size: 1.2em; opacity: 0.9; } .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 40px; } .example { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 20px; width: 300px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); } .example h2 { margin-top: 0; color: #ffdd59; } .animated-element { width: 100px; height: 100px; margin: 20px auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #333; font-weight: bold; } /* 第一个例子：颜色变化 + 旋转 */ .example-1 .animated-element { background-color: #ff6b6b; animation: color-change 4s infinite alternate, rotate 3s infinite linear; } /* 第二个例子：脉动 + 移动 */ .example-2 .animated-element { background-color: #48dbfb; animation: pulse 2s infinite ease-in-out, move 5s infinite alternate; } /* 第三个例子：形状变化 + 阴影动画 */ .example-3 .animated-element { background-color: #1dd1a1; animation: shape-shift 6s infinite alternate, shadow-pulse 3s infinite ease-in-out; } /* 关键帧动画定义 */ @keyframes color-change { 0% { background-color: #ff6b6b; } 25% { background-color: #ff9ff3; } 50% { background-color: #feca57; } 75% { background-color: #54a0ff; } 100% { background-color: #00d2d3; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes move { 0% { transform: translateX(-50px); } 100% { transform: translateX(50px); } } @keyframes shape-shift { 0% { border-radius: 10px; } 25% { border-radius: 50%; } 50% { border-radius: 10px; transform: skewX(0deg); } 75% { border-radius: 50%; transform: skewX(20deg); } 100% { border-radius: 10px; transform: skewX(0deg); } } @keyframes shadow-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .code-block { background: rgba(0, 0, 0, 0.2); border-radius: 8px; padding: 15px; font-family: 'Courier New', monospace; text-align: left; margin: 15px 0; overflow-x: auto; } .btn { background: #ff9f43; border: none; padding: 12px 25px; border-radius: 50px; color: white; font-weight: bold; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .btn:hover { background: #ffaf60; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } .btn:active { transform: translateY(0); } .explanation { max-width: 800px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 25px; margin-top: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .explanation h2 { color: #ffdd59; margin-top: 0; } </style> </head> <body> <h1>CSS多重动画演示</h1> <p class="subtitle">一个元素可以同时应用多个动画效果</p> <div class="container"> <div class="example example-1"> <h2>颜色变化 + 旋转</h2> <div class="animated-element">动画1</div> <div class="code-block"> animation: <br> color-change 4s infinite alternate,<br> rotate 3s infinite linear; </div> </div> <div class="example example-2"> <h2>脉动 + 移动</h2> <div class="animated-element">动画2</div> <div class="code-block"> animation: <br> pulse 2s infinite ease-in-out,<br> move 5s infinite alternate; </div> </div> <div class="example example-3"> <h2>形状变化 + 阴影动画</h2> <div class="animated-element">动画3</div> <div class="code-block"> animation: <br> shape-shift 6s infinite alternate,<br> shadow-pulse 3s infinite ease-in-out; </div> </div> </div> <button class="btn" onclick="restartAnimations()">重新播放动画</button> <div class="explanation"> <h2>实现说明</h2> <p>在CSS中，可以通过在<code>animation</code>属性中使用逗号分隔多个动画值来同时应用多个动画效果。</p> <p>每个动画可以独立设置其持续时间、延迟、重复次数、时间函数和方向等属性。</p> <p>语法示例：</p> <div class="code-block"> .element {<br> animation: <br> animation1 3s ease-in-out infinite alternate,<br> animation2 5s linear infinite;<br> } </div> <p>上面的代码同时应用了两个动画：animation1和animation2，它们具有不同的持续时间和时间函数。</p> </div> <script> function restartAnimations() { const elements = document.querySelectorAll('.animated-element'); elements.forEach(element => { // 先移除动画 element.style.animation = 'none'; // 触发重绘 void element.offsetWidth; // 重新应用动画 const example = element.closest('.example'); if (example.classList.contains('example-1')) { element.style.animation = 'color-change 4s infinite alternate, rotate 3s infinite linear'; } else if (example.classList.contains('example-2')) { element.style.animation = 'pulse 2s infinite ease-in-out, move 5s infinite alternate'; } else if (example.classList.contains('example-3')) { element.style.animation = 'shape-shift 6s infinite alternate, shadow-pulse 3s infinite ease-in-out'; } }); } </script> </body> </html>