css3制作简单动画

CSS3 制作简单动画的方法

CSS3 提供了多种方式制作动画，主要通过 transition、transform 和 animation 属性实现。以下是几种常见的实现方法。

使用 transition 实现过渡动画

transition 用于在元素状态变化时添加平滑过渡效果。可以指定过渡的属性、持续时间和缓动函数。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s ease-in-out;
}

.box:hover {
  width: 200px;
}

• transition-property：指定需要过渡的属性（如 width、opacity）。
• transition-duration：定义过渡的持续时间（如 2s）。
• transition-timing-function：设置过渡的速度曲线（如 ease-in-out）。
• transition-delay：设置过渡的延迟时间。

使用 transform 实现变形动画

transform 可以对元素进行旋转、缩放、移动或倾斜等操作，通常与 transition 结合使用。

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 1s;
}

.box:hover {
  transform: rotate(45deg) scale(1.2);
}

• rotate(deg)：旋转元素。
• scale(x, y)：缩放元素。
• translate(x, y)：移动元素。
• skew(x, y)：倾斜元素。

使用 animation 实现关键帧动画

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

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

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

• @keyframes：定义动画的关键帧。
• animation-name：指定关键帧名称。
• animation-duration：设置动画持续时间。
• animation-timing-function：控制动画速度曲线。
• animation-iteration-count：定义动画播放次数（如 infinite 无限循环）。

结合多个属性实现复杂动画

通过组合 transition、transform 和 animation，可以实现更丰富的动画效果。

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: all 0.5s;
}

.box:hover {
  transform: scale(1.5);
  opacity: 0.8;
}

• all：对所有属性应用过渡效果。
• 多个 transform 函数可以同时使用（如 scale 和 rotate）。

注意事项

• 性能优化：优先使用 transform 和 opacity，因为这两个属性不会触发重排（reflow）。
• 浏览器兼容性：部分旧版本浏览器可能需要前缀（如 -webkit-、-moz-）。
• 简化动画：避免过多复杂的动画，以免影响页面性能。

通过以上方法，可以轻松实现各种简单的 CSS3 动画效果。