css3新特性 - 关键帧动画、过渡动画和变换动画

CSS3 动画主要通过 @keyframes 规则和动画属性实现，分为关键帧动画和过渡动画两大类。以下是核心属性和分类说明：

1、关键帧动画（@keyframes）

1. animation-name
   绑定 @keyframes 定义的动画名称。
2. animation-duration
   设置动画周期时长（如 2s）。
3. animation-timing-function
   控制速度曲线，如 ease（缓入缓出）、linear（匀速）或 cubic-bezier 自定义。
4. animation-delay
   动画开始前的延迟时间（如 0.5s）。
5. animation-iteration-count
   播放次数（infinite 表示无限循环）。
6. animation-direction
   播放方向（normal、reverse、alternate 交替）。
7. animation-fill-mode
   动画结束后元素状态（如 forwards 保留最后一帧）。
8. animation-play-state
   控制播放状态（running 或 paused）。

示例：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.element {
  animation: fadeIn 2s ease-in-out infinite alternate;
}

2、过渡动画（transition）

用于属性变化的平滑过渡：

1. transition-property
   指定过渡属性（如 all、opacity）。
2. transition-duration
   过渡持续时间（如 0.3s）。
3. transition-timing-function
   速度曲线（同 animation-timing-function）。
4. transition-delay
   过渡延迟时间。

示例：

.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: #ff0000;
}

3、变换动画（transform）

结合动画实现位移、旋转等效果：

• translate：移动（translateX(100px)）
• rotate：旋转（rotate(45deg)）
• scale：缩放（scale(1.2)）
• skew：倾斜（skew(20deg)）

四、性能与兼容性建议

1. 优先使用 transform 和 opacity 以提升性能。
2. 旧版本浏览器需加前缀（如 -webkit-）。
3. 复杂动画可结合 JavaScript 控制。