CSS Animation 允许元素平滑地从一个样式状态过渡到另一个样式状态。通过设置关键帧（keyframes），可以控制动画序列中的中间步骤。
一、核心概念
1.关键帧（Keyframes）
- 使用
@keyframes规则定义动画序列 - 通过百分比或
from/to指定动画阶段 - 每个阶段可以设置元素的样式属性
2.动画属性
animation-name: 指定关键帧名称animation-duration: 动画持续时间（秒或毫秒）animation-delay: 动画延迟开始时间animation-iteration-count: 循环次数（数字或infinite）animation-direction: 动画方向（normal,reverse,alternate）animation-timing-function: 速度曲线（ease,linear,ease-in-out）animation-fill-mode: 动画前后的状态（forwards,backwards,both）animation-play-state: 动画播放状态（running,paused）
3.示例代码
下面是一个包含多种动画效果的完整示例：
html
预览
<!DOCTYPE html>
<html>
<head>
<style>
/* 基础样式 */
.container {
width: 500px;
height: 300px;
border: 1px solid #ccc;
margin: 20px auto;
position: relative;
}
/* 1. 简单移动动画 */
.box {
width: 50px;
height: 50px;
background: #3498db;
position: absolute;
top: 20px;
/* 应用动画 */
animation: move 3s infinite;
}
@keyframes move {
0% { left: 20px; }
50% { left: 430px; }
100% { left: 20px; }
}
/* 2. 旋转+透明度变化 */
.circle {
width: 40px;
height: 40px;
background: #e74c3c;
border-radius: 50%;
position: absolute;
top: 100px;
left: 20px;
animation: rotateAndFade 4s infinite linear;
}
@keyframes rotateAndFade {
0% { transform: rotate(0deg); opacity: 1; }
50% { opacity: 0.3; }
100% { transform: rotate(360deg); opacity: 1; }
}
/* 3. 弹跳动画 */
.ball {
width: 30px;
height: 30px;
background: #2ecc71;
border-radius: 50%;
position: absolute;
top: 180px;
left: 20px;
animation: bounce 1s infinite alternate ease-in;
}
@keyframes bounce {
to {
top: 220px;
height: 25px;
}
}
/* 4. 悬停触发动画 */
.button {
position: absolute;
top: 240px;
left: 20px;
padding: 10px 20px;
background: #9b59b6;
color: white;
border-radius: 5px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.button:hover {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* 5. 复杂动画序列 */
.combo {
width: 40px;
height: 40px;
background: #f39c12;
position: absolute;
top: 100px;
left: 440px;
animation: combo 6s infinite;
}
@keyframes combo {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-200px, 0) rotate(90deg); }
50% { transform: translate(-200px, 100px) rotate(180deg); }
75% { transform: translate(0, 100px) rotate(270deg); }
100% { transform: translate(0, 0) rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="circle"></div>
<div class="ball"></div>
<div class="button">Hover Me</div>
<div class="combo"></div>
</div>
</body>
</html>
二、高级技巧
1.多动画组合
css
.element {
animation:
fadeIn 1s,
slideUp 0.8s ease-out,
pulse 3s 2s infinite;
}
动画事件监听（JavaScript）
javascript
const element = document.querySelector('.box'); element.addEventListener('animationstart', () => { console.log('动画开始'); }); element.addEventListener('animationend', () => { console.log('动画结束'); }); element.addEventListener('animationiteration', () => { console.log('动画循环一次'); });使用 cubic-bezier 自定义速度曲线
css
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
三、浏览器兼容性
大多数现代浏览器都支持 CSS Animation，但建议添加前缀以确保兼容性：
css
.element {
-webkit-animation: fadeIn 1s; /* Safari 4+ */
-moz-animation: fadeIn 1s; /* Firefox 5+ */
-o-animation: fadeIn 1s; /* Opera 12+ */
animation: fadeIn 1s; /* Chrome, IE 10+ */
}
CSS Animation 为网页添加了丰富的交互体验，合理使用可以增强用户体验而不会造成干扰。