css中动画制作

CSS 动画制作方法

CSS 动画主要通过 @keyframes 和 animation 属性实现，以下是具体实现方式：

使用 @keyframes 定义动画

@keyframes 用于定义动画的关键帧，指定动画在不同时间点的样式变化。

@keyframes example {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  50% {
    background-color: yellow;
    transform: translateX(100px);
  }
  100% {
    background-color: green;
    transform: translateX(200px);
  }
}

应用动画到元素

通过 animation 属性将定义好的动画绑定到目标元素。

.element {
  animation-name: example;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

动画属性简写

animation 属性支持简写形式，顺序如下：

.element {
  animation: example 3s ease-in-out 1s infinite alternate;
}

常用动画属性说明

• animation-name: 指定 @keyframes 动画名称。
• animation-duration: 动画持续时间（如 2s）。
• animation-timing-function: 动画速度曲线（如 ease、linear）。
• animation-delay: 动画开始前的延迟时间。
• animation-iteration-count: 动画播放次数（infinite 表示无限循环）。
• animation-direction: 动画播放方向（如 alternate 表示来回交替）。
• animation-fill-mode: 定义动画结束后的状态（如 forwards 保留最后一帧）。

示例：淡入效果

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-element {
  animation: fadeIn 2s ease-in;
}

示例：旋转动画

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinning-icon {
  animation: spin 1s linear infinite;
}

浏览器兼容性

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

@-webkit-keyframes example { /* Safari/Chrome */ }
@-moz-keyframes example { /* Firefox */ }
@-o-keyframes example { /* Opera */ }

性能优化建议

• 优先使用 transform 和 opacity 属性，它们可通过 GPU 加速。
• 避免频繁触发重排（如修改 width、height）。
• 使用 will-change 属性预声明动画元素：

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