css制作教程动画
CSS动画基础概念
CSS动画通过@keyframes规则定义动画序列，结合animation属性实现元素动态效果。关键属性包括：
animation-name：绑定@keyframes名称animation-duration：动画持续时间（如2s）animation-timing-function：速度曲线（如ease-in-out）animation-iteration-count：播放次数（如infinite）
创建简单动画示例
定义@keyframes并应用动画：
/* 定义动画 */
@keyframes slide-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 应用动画 */
.element {
animation: slide-in 1.5s ease-out;
}此代码使元素从左侧滑入页面。
进阶动画技巧
多关键帧动画
在@keyframes中添加百分比阶段：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}组合动画
通过逗号分隔多个动画：
.element {
animation: slide-in 1s, fade-in 2s;
}动画性能优化
- 优先使用
transform和opacity属性（触发GPU加速） - 避免频繁触发重排（如修改
width/height） - 使用
will-change提示浏览器优化：.element { will-change: transform; }
响应式动画适配
通过媒体查询调整动画参数：
@media (max-width: 600px) {
.element {
animation-duration: 0.5s;
}
}实用工具推荐
- Animate.css：预置动画库，直接添加类名即可使用
- CSS Triggers：查询属性对渲染性能的影响
通过系统学习上述方法，可逐步掌握从基础到复杂的CSS动画实现。
