前端CSS动画制作
CSS动画基础
CSS动画通过@keyframes规则定义动画序列，结合animation属性控制播放。以下是一个基础示例：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}关键属性说明
@keyframes：定义动画阶段（如from/to或百分比0%/50%/100%）。animation：简写属性，包含以下子属性：animation-name：绑定@keyframes名称。animation-duration：动画时长（如2s）。animation-timing-function：速度曲线（如ease、linear）。animation-delay：延迟启动时间。animation-iteration-count：重复次数（infinite表示无限循环）。animation-direction：播放方向（如alternate往返播放）。
常见动画效果示例
淡入淡出
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-element {
animation: fade 1.5s ease-in;
}平移效果
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slide 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}旋转缩放
@keyframes spin {
0% { transform: rotate(0deg) scale(0.5); }
100% { transform: rotate(360deg) scale(1); }
}
.spin-element {
animation: spin 2s linear infinite;
}性能优化建议
- 优先使用
transform和opacity属性，它们不会触发重排（reflow），性能更高。 - 避免频繁修改
width、height或margin等属性。 - 使用
will-change提示浏览器优化（如will-change: transform;）。
响应式动画适配
通过媒体查询调整动画参数：
@media (max-width: 768px) {
.element {
animation-duration: 1s; /* 移动端缩短动画时间 */
}
}工具与框架推荐
- Animate.css：预置动画库，直接添加类名即可使用（如
animate__fadeIn）。 - GreenSock (GSAP)：高级动画库，适合复杂交互场景。
- CSS Tricks 和 CodePen：参考社区案例快速实现效果。
通过组合关键帧和动画属性，可以灵活实现从简单过渡到复杂交互的视觉效果。
