CSS Animation 详解
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 为网页添加了丰富的交互体验，合理使用可以增强用户体验而不会造成干扰。