制作css动画效果
CSS 动画基础语法
使用 @keyframes 定义动画关键帧，再通过 animation 属性将动画应用到元素：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}fadeIn是动画名称，from和to定义起始和结束状态。animation是简写属性，包含时长、缓动函数等参数。
常用动画属性
animation-name
指定@keyframes名称。animation-duration
动画时长（如2s）。animation-timing-function
控制速度曲线（如ease、linear）。animation-delay
延迟开始时间（如1s）。animation-iteration-count
播放次数（如infinite表示循环）。
示例：
.element {
animation: bounce 1s ease-in-out 0.5s infinite alternate;
}关键帧进阶控制
在 @keyframes 中可使用百分比定义多阶段动画：
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}0%和100%分别对应动画开始和结束。- 中间百分比（如
50%）插入过渡状态。
结合 Transform 属性
通过 transform 实现旋转、缩放等效果：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}常用变换函数：
rotate()：旋转scale()：缩放translate()：位移
动画性能优化
- 优先使用
transform和opacity
这两个属性不会触发重排（reflow），性能更高。 - 避免过度使用
box-shadow
阴影计算消耗资源较多。 - 启用硬件加速
使用transform: translateZ(0)强制 GPU 渲染。
示例：
.optimized {
transform: translateZ(0);
animation: slide 1s ease-out;
}响应式动画控制
通过 JavaScript 动态控制动画：
const element = document.querySelector('.box');
element.style.animationPlayState = 'paused'; // 暂停动画
element.style.animation = 'fadeIn 2s forwards'; // 重新触发animationPlayState可暂停或恢复动画。- 修改
animation属性可重新播放。
实际应用示例
悬停放大效果：
.button {
transition: transform 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}加载旋转动画：
@keyframes loading {
to { transform: rotate(360deg); }
}
.loader {
animation: loading 1s linear infinite;
}
