css3前端动画制作

CSS3 前端动画制作方法

使用 transition 实现平滑过渡

transition 用于在属性变化时添加平滑过渡效果。通过指定属性、持续时间、时间函数和延迟，可以控制动画的细节。

.element {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 1s ease-in-out;
}

.element:hover {
  width: 200px;
}

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

使用 @keyframes 创建复杂动画

@keyframes 允许定义动画的中间状态，通过百分比或 from/to 关键字描述动画序列。

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  animation: slide 2s infinite alternate;
}

• animation-name：绑定 @keyframes 名称。
• animation-duration：设置动画周期时间。
• animation-timing-function：定义速度曲线（如 linear）。
• animation-iteration-count：控制播放次数（如 infinite）。
• animation-direction：指定动画方向（如 alternate）。

结合 transform 实现视觉效果

transform 提供旋转、缩放、移动等效果，常与动画配合使用。

.element {
  transform: rotate(0deg);
  transition: transform 0.5s;
}

.element:hover {
  transform: rotate(45deg);
}

• rotate()：旋转元素。
• scale()：缩放元素大小。
• translate()：移动元素位置。
• skew()：倾斜元素。

使用 animation-fill-mode 控制动画结束状态

animation-fill-mode 定义动画执行前后如何应用样式。

.element {
  animation: fade 2s forwards;
}

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

• forwards：保留最后一帧样式。
• backwards：应用第一帧样式。
• both：结合两者特性。

优化性能的实践

优先使用 opacity 和 transform，这些属性不会触发重排或重绘，性能更高。

避免在动画中频繁修改 width、height 或 margin，这些属性会触发布局计算。

启用硬件加速：

.element {
  transform: translateZ(0);
}