css属性制作动画

CSS 动画基础

CSS 动画通过 @keyframes 和 animation 属性实现。@keyframes 定义动画的关键帧，animation 控制动画的播放方式（如时长、延迟、循环等）。

示例代码：

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

.element {
  animation: slide-in 1s ease-in-out;
}

关键属性详解

1. @keyframes
定义动画的中间状态，支持百分比或 from/to 语法：

@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

2. animation 复合属性
包含以下子属性（空格分隔）：

• animation-name: 关键帧名称（如 slide-in）。
• animation-duration: 动画时长（如 2s）。
• animation-timing-function: 速度曲线（如 ease、linear）。
• animation-delay: 延迟时间（如 0.5s）。
• animation-iteration-count: 循环次数（如 infinite）。
• animation-direction: 播放方向（如 alternate 来回播放）。

示例：

.box {
  animation: bounce 2s ease-in-out 0.5s infinite alternate;
}

常用动画效果

1. 淡入淡出

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-element {
  animation: fade-in 0.5s;
}

2. 缩放动画

@keyframes scale {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}
.scale-element {
  animation: scale 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

3. 旋转动画

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

性能优化建议

• 优先使用 transform 和 opacity 属性，它们可通过 GPU 加速。
• 避免频繁触发重排（如修改 width、margin）。
• 使用 will-change 提示浏览器优化：

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

浏览器兼容性

• 现代浏览器均支持 CSS 动画。
• 如需兼容旧版浏览器（如 IE9），需添加前缀：

  @-webkit-keyframes example { ... }
  @-moz-keyframes example { ... }