当前位置：首页 > CSS

css3制作简单动画

2026-01-08 20:12:00CSS

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;
}