网页制作中css中运行

CSS 动画基础

CSS 动画通过 @keyframes 和 animation 属性实现动态效果。@keyframes 定义动画关键帧，animation 控制动画的持续时间、速度曲线等。

定义关键帧：

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

应用动画：

.element {
  animation: slideIn 2s ease-in-out;
}

常用动画属性

• animation-name：指定 @keyframes 名称。
• animation-duration：动画时长（如 2s）。
• animation-timing-function：速度曲线（如 ease, linear）。
• animation-delay：延迟启动时间。
• animation-iteration-count：重复次数（infinite 表示无限循环）。

.element {
  animation: bounce 1s ease-in-out 0.5s infinite alternate;
}

复杂动画示例

多关键帧动画：

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

组合动画：

.element {
  animation: slideIn 2s, pulse 1.5s infinite;
}

性能优化建议

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

  .element {
    will-change: transform;
  }

浏览器兼容性

• 现代浏览器均支持 CSS 动画，旧版本需加前缀（如 -webkit-）。
• 可通过工具（如 Autoprefixer）自动添加前缀。