当前位置：首页 > CSS

前端CSS动画制作

2026-03-12 05:57:05CSS

CSS动画基础

CSS动画通过@keyframes和animation属性实现。定义关键帧后，将其绑定到元素并设置持续时间、延迟等参数。

关键帧定义示例：

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

应用动画到元素：

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

常用动画属性

animation-name：指定@keyframes名称。
animation-duration：动画时长（如3s）。
animation-timing-function：速度曲线（ease、linear等）。
animation-delay：延迟启动时间。
animation-iteration-count：重复次数（infinite表示无限循环）。
animation-direction：播放方向（alternate来回播放）。

复合写法示例：

.element {
  animation: fadeIn 2s ease-in 1s infinite alternate;
}

变换动画（Transform）

结合transform属性实现位移、旋转、缩放等效果：

@keyframes moveAndScale {
  0% { transform: translateX(0) scale(1); }
  50% { transform: translateX(100px) scale(1.5); }
  100% { transform: translateX(0) scale(1); }
}

过渡效果（Transition）

适用于简单的状态变化（如悬停）：

.button {
  transition: background-color 0.3s, transform 0.2s;
}
.button:hover {
  background-color: #ff0000;
  transform: scale(1.1);
}

性能优化建议

优先使用transform和opacity，这类属性不会触发重排（性能开销小）。
避免频繁修改width、height或margin等属性。
使用will-change提示浏览器优化（如will-change: transform）。

复杂动画示例

实现弹跳效果：

前端CSS动画制作

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
}
.ball {
  animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

通过调整关键帧百分比和贝塞尔曲线（cubic-bezier）可自定义运动轨迹。