css3动画制作

CSS3 动画制作方法

关键帧动画（@keyframes）

通过 @keyframes 定义动画序列，结合 animation 属性实现动态效果。

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.element {
  animation: slideIn 1s ease-in-out;
}

过渡效果（transition）

使用 transition 实现属性变化的平滑过渡，需触发条件（如 :hover）。

.box {
  width: 100px;
  transition: width 0.5s ease;
}
.box:hover {
  width: 200px;
}

动画属性详解

• animation-name: 绑定 @keyframes 名称。
• animation-duration: 动画持续时间（如 2s）。
• animation-timing-function: 速度曲线（如 ease, linear）。
• animation-delay: 延迟启动时间。
• animation-iteration-count: 播放次数（infinite 表示循环）。
• animation-direction: 播放方向（alternate 往返播放）。

复合属性示例

.element {
  animation: pulse 2s ease-in-out 0.5s infinite alternate;
}

多动画叠加

同一元素可叠加多个动画，用逗号分隔。

.element {
  animation: 
    fadeIn 1s ease-out,
    rotate 3s linear infinite;
}

性能优化建议

• 优先使用 transform 和 opacity，避免触发重排。
• 启用硬件加速：transform: translateZ(0)。
• 减少高频动画的使用（如 box-shadow 变化）。

浏览器兼容性

• 前缀处理：-webkit-（Chrome/Safari）、-moz-（Firefox）。
• 可通过工具（如 Autoprefixer）自动添加。