css动画制作
CSS动画基础语法
CSS动画通过@keyframes规则定义动画序列，再通过animation属性绑定到元素上。基本语法结构分为两部分：
@keyframes 动画名称 {
0% { /* 起始状态 */ }
100% { /* 结束状态 */ }
}
选择器 {
animation: 动画名称 持续时间 时间函数 延迟 次数 方向 填充模式;
}关键帧定义
关键帧使用百分比或from/to关键字定义动画阶段。允许多个关键帧点：
@keyframes slide {
from { transform: translateX(0); }
50% { transform: translateX(100px); }
to { transform: translateX(200px); }
}动画属性详解
完整动画属性包含8个子属性：
.element {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}简写形式：
.element {
animation: slide 2s ease-in-out 0.5s infinite alternate forwards;
}常用动画效果示例
淡入效果：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s;
}弹跳效果：
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce {
animation: bounce 0.5s infinite;
}性能优化技巧
使用transform和opacity属性制作动画，这两个属性不会触发重排：
@keyframes smoothMove {
to {
transform: translate3d(100px, 0, 0);
opacity: 0.5;
}
}启用硬件加速：
.element {
will-change: transform;
transform: translateZ(0);
}响应式动画控制
通过JavaScript控制动画状态：
const element = document.querySelector('.animated');
element.style.animationPlayState = 'paused';
// 恢复动画
element.style.animationPlayState = 'running';媒体查询调整动画参数：
@media (max-width: 600px) {
.mobile-animation {
animation-duration: 0.5s;
}
}
