css动画制作教学
CSS 动画基础概念
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如时长、延迟、循环等）。
定义关键帧
通过 @keyframes 规则定义动画的起始和结束状态，或中间阶段的样式变化。语法如下：
@keyframes 动画名称 {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}示例：实现元素从左向右移动的动画
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(200px); }
}应用动画
通过 animation 属性将动画绑定到元素。常用子属性包括：
animation-name: 动画名称（与@keyframes一致）。animation-duration: 动画持续时间（如2s）。animation-timing-function: 速度曲线（如ease-in-out）。animation-delay: 延迟时间（如1s）。animation-iteration-count: 播放次数（如infinite表示无限循环）。
示例：将 slide 动画应用到 div 元素
div {
width: 100px;
height: 100px;
background: red;
animation: slide 3s ease-in-out infinite;
}动画速度曲线
animation-timing-function 控制动画的加速度，可选值：
linear: 匀速。ease: 默认值，慢快慢。ease-in: 慢到快。ease-out: 快到慢。cubic-bezier(n,n,n,n): 自定义贝塞尔曲线。
示例：自定义贝塞尔曲线
div {
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}动画方向与填充模式
animation-direction: 控制播放方向（normal、reverse、alternate）。animation-fill-mode: 定义动画结束后的状态（forwards保留最后一帧）。
示例：动画结束后保留最后一帧
div {
animation: slide 2s forwards;
}复合动画
通过逗号分隔，为元素添加多个动画：
div {
animation:
slide 3s ease-in-out infinite,
fade 2s ease-out;
}响应式动画
结合媒体查询实现不同屏幕尺寸下的动画效果：
@media (max-width: 600px) {
div {
animation: slide-mobile 2s;
}
}性能优化建议
- 优先使用
transform和opacity属性，它们可通过 GPU 加速。 - 避免频繁触发重绘（如修改
width/height）。 - 使用
will-change提示浏览器优化：div { will-change: transform; }
示例：心跳动画
@keyframes heartbeat {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.heart {
animation: heartbeat 1s infinite;
}调试工具
浏览器开发者工具（如 Chrome DevTools）可实时查看和修改动画曲线、时间等参数。
