CSS学习笔记(二)：CSS动画核心属性全解析

CSS动画属性分类

CSS动画属性分为两大核心模块：过渡（Transition）和关键帧动画（Animation），辅以变形（Transform）和基础样式控制。

---

过渡（Transition）属性

transition-property

指定应用过渡效果的CSS属性名称，如width、opacity。可用all表示所有属性。

transition-duration

定义过渡持续时间，单位秒（s）或毫秒（ms），例如0.5s。

transition-timing-function

控制动画速度曲线，常用值：

• ease（默认，先快后慢）
• linear（匀速）
• ease-in（加速）
• ease-out（减速）
• cubic-bezier(n,n,n,n)（自定义贝塞尔曲线）

transition-delay

设置动画延迟开始时间，如1s表示1秒后触发。

简写语法

.element {
  transition: property duration timing-function delay;
}
/* 示例 */
.box {
  transition: width 0.3s ease-in-out 0.1s;
}
 

---

关键帧定义：@keyframes

通过 @keyframes 定义动画序列，指定从开始（from 或 0%）到结束（to 或 100%）的样式变化。

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

---

动画属性列表

1. animation-name

指定使用的 @keyframes 名称。

.element { animation-name: slide-in; }

2. animation-duration

设置动画完成一个周期的时间（单位：s 或 ms）。

.element { animation-duration: 2s; }

3. animation-timing-function

控制动画速度曲线，常见值：

• ease（默认，慢快慢）
• linear（匀速）
• cubic-bezier(n,n,n,n)（自定义贝塞尔曲线）

.element { animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }

4. animation-delay

定义动画开始前的延迟时间。

.element { animation-delay: 1s; }

5. animation-iteration-count

设置动画重复次数：

• number（如 3）
• infinite（无限循环）

.element { animation-iteration-count: infinite; }

6. animation-direction

控制动画播放方向：

• normal（默认，正向播放）
• reverse（反向播放）
• alternate（正反交替）

.element { animation-direction: alternate; }

7. animation-fill-mode

定义动画结束后元素的样式状态：

• none（恢复初始状态）
• forwards（保留最后一帧样式）
• backwards（应用第一帧样式）

.element { animation-fill-mode: forwards; }

8. animation-play-state

控制动画暂停/播放：

• running（默认，播放中）
• paused（暂停）

.element { animation-play-state: paused; }

---

简写属性：animation

将上述属性合并为一行，顺序为：
name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

.element {
  animation: slide-in 2s ease-in-out 1s infinite alternate forwards;
}

---

变形（Transform）属性

位移

• translateX(50px)：水平移动
• translateY(20%)：垂直移动
• translate(x, y)：二维位移

旋转

• rotate(45deg)：顺时针旋转45度
• rotateX(180deg)：绕X轴3D旋转

缩放

• scale(1.2)：等比放大
• scaleX(0.5)：水平缩小

倾斜

• skewX(30deg)：水平倾斜变形

组合变换

.element {
  transform: translate(10px, 20px) rotate(10deg) scale(0.9);
}
 

---

其他辅助属性

will-change

提示浏览器哪些属性即将变化以优化性能：

.element {
  will-change: transform, opacity;
}
 

perspective

设置3D变换的视距，影响深度效果：

.container {
  perspective: 1000px;
}
 

---

应用场景及代码示例

场景1：悬停按钮效果

鼠标悬停时按钮放大并改变颜色：

.button {
  transition: transform 0.3s, background-color 0.3s;
}
.button:hover {
  transform: scale(1.1);
  background-color: #ff5722;
}

场景2：无限旋转加载动画

使用@keyframes实现旋转：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 2s linear infinite;
}

场景3：页面元素淡入

元素进入视口时触发淡入效果：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

---

优化建议

• 硬件加速 ：使用transform和opacity属性触发GPU加速，减少卡顿。
• 减少重绘 ：避免动画过程中修改width、height或margin等触发布局变化的属性。
• 限制并发动画 ：过多同时运行的动画可能导致性能问题，可通过animation-delay错开时机。
• 使用will-change ：提示浏览器元素即将变化，例如will-change: transform。

---

注意事项

• 兼容性 ：部分旧浏览器需前缀（如-webkit-），可通过工具自动添加。
• 动画时长：避免过长（超过1秒）导致用户等待，或过短（低于100ms）难以感知。
• 禁用场景 ：为尊重用户偏好，使用@media (prefers-reduced-motion: reduce)关闭动画。
• 回流与重绘 ：频繁触发回流的动画（如修改left）性能较差，优先使用transform。

---

总结

CSS动画适用于轻量级交互效果，如过渡、加载指示和微交互，能显著提升用户体验。通过合理使用关键帧和性能优化技巧，可平衡效果与性能。复杂动画仍需结合JavaScript（如GSAP），但CSS动画在简单场景中仍是高效选择。