css动画简易制作
CSS 动画基础语法
使用 @keyframes 定义动画关键帧，通过 animation 属性绑定到元素：
@keyframes 动画名称 {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element {
animation: 动画名称 2s ease-in-out infinite;
}关键属性说明
animation-name: 指定@keyframes名称animation-duration: 动画持续时间（如 2s）animation-timing-function: 速度曲线（ease/linear/ease-in等）animation-delay: 延迟启动时间animation-iteration-count: 播放次数（数字或infinite）animation-direction: 播放方向（normal/alternate等）
常用动画效果示例
淡入效果
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1.5s;
}位移动画
@keyframes slide {
0% { transform: translateX(-100px); }
100% { transform: translateX(0); }
}
.slide-element {
animation: slide 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}复合动画写法
简写属性按以下顺序排列：
.element {
animation: name duration timing-function delay iteration-count direction;
}浏览器兼容前缀
针对老旧浏览器可能需要添加前缀：
@-webkit-keyframes example {
/* Chrome, Safari */
}
@-moz-keyframes example {
/* Firefox */
}动画暂停控制
通过JavaScript控制动画状态：
element.style.animationPlayState = 'paused'; // 或 'running'性能优化建议
- 优先使用
transform和opacity属性（不会触发重排） - 避免频繁操作会引起布局变化的属性（如width/height）
- 对移动设备使用
will-change: transform;提示浏览器优化
