当前位置：首页 > CSS

css3制作简单动画

2026-01-27 22:42:40CSS

CSS3 制作简单动画的方法

CSS3 提供了多种方式制作动画，主要包括 transition 和 animation 两种核心方法。以下是具体实现方式：

使用 `transition` 实现过渡动画

transition 用于在元素状态变化时添加平滑过渡效果。适用于简单的属性变化，如颜色、大小、位置等。

css3制作简单动画

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: all 0.3s ease-in-out;
}

.box:hover {
  background: red;
  transform: scale(1.2);
}

属性说明：
- transition-property：指定过渡的属性（如 all 表示所有属性）。
- transition-duration：过渡持续时间（如 0.3s）。
- transition-timing-function：过渡速度曲线（如 ease-in-out）。
- transition-delay：延迟时间（可选）。

使用 `animation` 实现关键帧动画

animation 结合 @keyframes 可以定义更复杂的动画序列，支持多阶段状态变化。

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: green;
  animation: slide 2s infinite;
}

属性说明：
- animation-name：关联的 @keyframes 名称（如 slide）。
- animation-duration：动画周期时长（如 2s）。
- animation-timing-function：速度曲线（如 ease）。
- animation-iteration-count：播放次数（如 infinite）。
- animation-direction：播放方向（如 alternate）。

常用动画效果示例

淡入淡出：

css3制作简单动画

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

旋转动画：

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

弹跳效果：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.ball {
  animation: bounce 0.5s infinite;
}

性能优化建议

优先使用 transform 和 opacity 属性，这些属性不会触发重排（reflow），性能更高。
避免过度使用动画，尤其是移动端设备。
使用 will-change 属性提前告知浏览器可能的变化：
```
.element {
  will-change: transform, opacity;
}
```

通过以上方法，可以快速实现各种常见的CSS3动画效果。