transition 是 css 中用于实现元素样式渐变过渡的属性，通过指定属性、持续时间、时间函数和延迟来控制动画效果。基本用法是：在 css 中为元素定义 transition 属性，并结合状态变化（如 hover）触发过渡，例如按钮悬停变色。html 主要提供结构和类名，使 css 能够定位目标元素并应用过渡。常见问题包括属性不支持过渡、初始或目标值不明确、未正确触发变化等。使用技巧有：按需指定具体属性以提升性能，或添加 delay 参数实现延迟动画。
过渡效果在网页设计中很常见，比如按钮悬停变色、菜单展开收缩这些平滑的动画效果，其实大多是通过 CSS 的 transition 属性实现的。HTML 本身不直接处理动画，但它是结构基础，和 CSS 配合才能让过渡动起来。
transition 是什么？怎么用？
transition 简单来说就是控制元素从一种样式渐变到另一种样式的过程。它不是瞬间变化，而是有个过程，比如颜色、大小、位置的变化都可以加过渡。
基本写法是这样的：
立即学习“前端免费学习笔记（深入）”；
.element {
transition: property duration timing-function delay;
}例如：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: darkblue;
}这样当鼠标移到按钮上时，背景色就会在 0.3 秒内慢慢变深。
HTML 怎么配合 transition？
HTML 主要是提供结构和类名，让 CSS 能找到目标元素来添加过渡效果。比如一个按钮的 HTML 可能是：
<button class="btn">点击我</button>
然后在 CSS 中给 .btn 类加上 transition 和状态变化的样式，比如 hover 或 active 状态。
.btn {
background: #4CAF50;
transition: background 0.2s ease;
}
.btn:hover {
background: #45a049;
}所以 HTML 不需要写 JS 或复杂结构，只要类名正确，CSS 就能通过选择器控制过渡。
常见问题：为什么 transition 没有效果？
有时候写了 transition 却没反应，可能是这几个原因：
-
属性不能过渡：像
display、visibility这种开关式属性是不能加过渡的。可以用opacity或height来替代。 -
初始值或目标值不明确：比如从
auto到具体数值，浏览器不好计算中间过程，就可能跳过过渡。 -
没有触发变化：过渡只会在样式发生变化时生效，如果只是设置了
transition但没改变任何样式，也不会有动画。 -
忘记加浏览器前缀（现代浏览器一般不需要了），不过如果你要兼容旧版浏览器，可以考虑加上
-webkit-、-moz-等。
transition 动画的小技巧
有时候你想让多个属性都过渡，可以简写成这样：
transition: all 0.3s ease;
但这样做会把所有可过渡的属性都加动画，可能会带来性能影响或者意料之外的效果。建议还是按需指定具体的属性更好。
还有一种情况是想让动画延迟一点开始，比如加载完成后再动一下，这时候就可以用 delay 参数：
transition: opacity 0.5s ease 0.2s;
表示等 0.2 秒后，再用 0.5 秒完成透明度变化。
基本上就这些，transition 不难，但要让它顺滑自然，还得注意细节。
