CSS 动画 - HTML & CSS

01. CSS 过渡 Transition

Transition 是最简单的动画方式，让元素属性从一个值平滑变到另一个值。四个要素：要变什么属性、变多久、用什么速度曲线、延迟多久开始。适合做 hover 效果、显示隐藏之类的简单交互。

css

.btn {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s;
}

.btn:hover {
  background: #2563eb;
  transform: scale(1.05);
}

transition 写在元素默认状态上，不是写在 hover 状态上。

02. CSS 关键帧动画 Keyframes

Keyframes 能做 Transition 做不到的复杂动画，比如循环播放、多阶段变化。用 @keyframes 定义动画的各个阶段（0% 到 100%），然后用 animation 属性绑到元素上。可以控制播放次数、方向、填充模式等。

css

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}

.box { animation: slideIn 0.5s ease-out; }

03. 贝塞尔曲线和缓动函数

缓动函数决定了动画的速度节奏。ease 是慢-快-慢，linear 是匀速，ease-in 是慢启动，ease-out 是慢结束。cubic-bezier 可以自定义曲线形状，四个参数两个控制点坐标。想要弹性效果？用超越 0-1 范围的参数。

css

/* 标准缓动 */
.standard { transition-timing-function: ease; }

/* 自定义弹性 */
.bouncy { 
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 越来越慢 */
.decelerate { animation-timing-function: ease-out; }

动画速度不能太慢，300ms 以内最佳，超过 500ms 用户会觉得卡。

04. 性能优化：只动画 transform 和 opacity

浏览器渲染四个阶段：重排、重绘、合成、绘制。不同 CSS 属性触发的阶段不同。width/height 改动触发重排，最费性能。transform 和 opacity 只触发合成阶段，能用 GPU 加速，丝般顺滑。动画性能黄金法则：只用 transform 和 opacity。

css

/* 不要这样 - 触发重排 */
.bad { transition: width 0.3s, height 0.3s; }

/* 应该这样 - 只触发合成 */
.good { 
  transition: transform 0.3s, opacity 0.3s;
  will-change: transform;
}

/* 平移替代 left/top */
.slide { transform: translateX(100px); }

will-change 提前告诉浏览器这个元素要动，做好优化准备。但不要滥用，用多了反而占用太多 GPU 内存。

05. 实用的动画小技巧

动画不一定非要飞进来飞出去，微小的过渡效果就能大幅提升体验。按钮的 active 缩放、页面加载的骨架屏闪烁、滚动渐显元素、hover 时卡片的上浮阴影，这些都是低成本高回报的小动画。media 查询 prefers-reduced-motion 要尊重用户的无障碍偏好。

css

/* 骨架屏闪烁 */
@keyframes shimmer {
  to { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

知识测验

第 1/4 题正确 0

CSS transition 应该写在哪个状态上？

表单与验证