正在加载...

CSS 过渡

盒阴影给了你平静的深度。过渡给你平静的随时间变化：按钮悬停时背景变柔和，卡片获焦时略微抬起，链接颜色是滑动而不是猛跳。你仍然写两个状态——浏览器在你设定的时长内在其间插值。

过渡是什么

过渡不会独自发明新外观。它监视已经在变的属性（常见于 :hover、:focus-visible 或类名），并把这次变化做成动画。没有过渡就是瞬间跳变；有了过渡，你会得到一段短而可读的滑动。

四个完整写法是 transition-property、transition-duration、transition-timing-function 和 transition-delay。日常工作多用简写 transition。

属性与时长

写明哪些属性可以动、变化要花多久。时长是时间值（0.2s、200ms）。短而有目的胜过戏剧性等待——界面反馈常见在 150ms–300ms 左右。

悬停时柔和的按钮背景

css 
.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 0.2s;
}

.btn:hover {
background: #1d4ed8;
color: #f8fafc;
}

把过渡写在基础规则上，这样进入和离开悬停状态都会有动画。只列出你真正想动的属性——否则意外的布局跳动也会滑上半秒。

缓动与延迟

transition-timing-function 塑造速度曲线：ease（默认手感）、linear、ease-in、ease-out、ease-in-out，或自定义 cubic-bezier(...)。transition-delay 在变化开始前等待——适合错开菜单，但在单个按钮上很容易用过。

opacity 上的 ease-out 与 linear

css 
.fade-panel {
opacity: 0.65;
transition: opacity 0.35s ease-out;
}

.fade-panel.is-bright {
opacity: 1;
}

.meter-bar {
width: 40%;
transition: width 0.4s linear;
}

.meter-bar.is-full {
width: 100%;
}

界面出现时，ease-out 往往更自然。Linear 适合应读成匀速的进度。把延迟留给有意的序列——不要让每次点击都显得迟钝。

简写与多属性运动

简写里常见顺序是：属性、时长、缓动函数、延迟。可用逗号列出多条过渡。优先选择对绘制友好的属性——transform 与 opacity 通常比动画化 width、height、top 或 margin 更顺滑。

用 transform 与阴影做悬停抬起

css 
.card-lift {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.card-lift:hover,
.card-lift:focus-visible {
transform: translateY(-0.25rem);
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
}

这里，上一课的深度与运动相遇：阴影与抬起共享同一个悬停瞬间。位移保持小幅，页面才会仍显得稳固。

减少动效，以及何时用动画

有些人偏好更少运动。尊重 prefers-reduced-motion: reduce，缩短或关闭非必要过渡。过渡擅长 A → B 状态变化。循环或多步叙事属于后面的 CSS 动画（@keyframes）——在 Transforms 之后。

自己试试

  1. 给按钮加 0.2s 背景过渡并悬停——再把 transition 从 :hover 挪到基础规则，比较离开悬停的表现。
  2. 用类切换以 ease-out 动画化面板的 opacity；再试 linear 并体会手感。
  3. 在卡片悬停上组合 transform: translateY(...) 与更柔的 box-shadow（两个属性，一条简写列表）。
  4. 在 DevTools 中模拟 prefers-reduced-motion: reduce，确认非必要动效会退让。
  5. 本练习先不要为打开菜单动画化 height——那种模式留给之后。

常见错误

  • 写 transition: all 1s，让每个属性（含布局）都滑整整一秒
  • 多秒时长让界面显得迟钝
  • 在 transform 或 opacity 就够用时仍动画化 width / top / margin
  • 忽略 prefers-reduced-motion
  • 指望过渡无限循环——那是动画的领域

小结

  • 过渡在一段时长内平滑两个状态之间的属性变化
  • 控制属性、时长、缓动与延迟（或使用 transition 简写）
  • 优先对绘制友好的属性做短运动；把过渡写在基础规则上
  • 尊重减少动效偏好；循环与复杂序列用关键帧动画
  • Effects & Motion 下一课：Transforms

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 59 的 63
Css 教程