css中动画制作
CSS 动画基础
CSS 动画通过 @keyframes 规则和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如持续时间、延迟、重复次数等）。
示例：淡入动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}关键帧定义
@keyframes 支持百分比或 from/to 语法定义动画阶段。
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}动画属性
animation 是以下子属性的简写：
animation-name: 关键帧名称（如fadeIn）。animation-duration: 动画时长（如3s）。animation-timing-function: 速度曲线（如ease、linear）。animation-delay: 延迟时间（如1s）。animation-iteration-count: 重复次数（如infinite）。animation-direction: 播放方向（如alternate）。animation-fill-mode: 结束后的样式（如forwards）。
示例：组合属性
.element {
animation: slide 3s ease 1s infinite alternate forwards;
}动画效果示例
旋转动画
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}背景色渐变
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: blue; }
}
.box {
animation: colorChange 5s infinite;
}性能优化
- 优先使用
transform和opacity，它们可通过 GPU 加速。 - 避免频繁触发重排（如修改
width、margin）。 - 使用
will-change提示浏览器优化（如will-change: transform）。
响应式动画
通过媒体查询调整动画行为：
@media (max-width: 600px) {
.element { animation-duration: 1s; }
}动画事件监听
JavaScript 可监听动画开始、结束或重复事件：
const element = document.querySelector('.element');
element.addEventListener('animationend', () => {
console.log('动画结束');
});
