-
一个元素可以同时运行多个CSS动画
-
通过
animation属性使用逗号分隔多个动画值来实现 -
每个动画可以有自己的持续时间、延迟、重复次数和时间函数
可以复制自行查看效果，希望可以帮到你
html
<!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>