CSS transition 执行一次，仅响应属性值变化；所谓“重复”是多次触发所致，并非自身循环。它无内置迭代逻辑，不受 animation-iteration-count 影响，也不自动轮播。
transition 执行一次还是重复？
CSS transition 本身不决定“执行几次”，它只响应**属性值变化**——只要触发了合法的属性变更（比如 class 切换、:hover 进入/离开、JS 修改 style），就会按规则执行一次过渡。所谓“重复”，其实是多次触发导致的多次执行，不是过渡自己循环。
常见误解是以为加了 transition 就会自动轮播或循环动画，其实不会。它没有内置迭代逻辑，也不受 animation-iteration-count 影响（那是 @keyframes 的事）。
用 transition-property 精确控制哪些属性动
transition-property 决定「谁响应变化」。设成 all 很方便，但容易误触：比如你只想让 background-color 过渡，结果 padding 也跟着动（因为父元素重排引发子元素尺寸微变），视觉上就像多动了。
- 推荐显式列出，比如
transition-property: background-color, transform; - 避免用
all，除非你完全掌控所有可能变化的属性 - 注意缩写属性（如
border）和底层属性（如border-color）的触发关系——改border会触发border-color和border-width，但若transition-property只写了border-color，border-width的变化就不会有过渡
transition-timing-function 控制的是“怎么动”，不是“动几次”
transition-timing-function（如 ease-in-out、cubic-bezier(.2,0,.2,1)）只定义单次过渡过程中的速度曲线。它不影响执行频次，但会影响你对“是否重复”的感知：
立即学习“前端免费学习笔记（深入）”；
- 如果 timing function 末尾值不收敛（比如用
steps(3, end)做阶梯过渡），看起来像卡顿或跳变，容易误判为“没执行完”或“重复了” -
step-start和step-end在 hover 进出时可能造成“闪一下就结束”，其实是过渡时间太短 + 阶梯函数特性，不是重复执行 - 调试时可临时换成
linear或加长transition-duration，确认是不是 timing function 掩盖了实际触发次数
真正导致“看似重复”的常见原因
多数人以为 transition 重复，其实是外部状态反复触发。典型场景：
- JS 中在
mouseenter里反复设置同一个 class（没做防抖或状态判断），每次都会重新触发过渡 - CSS 中用
:hover+transform: translateX(10px)，但父容器有overflow: hidden，鼠标轻微移动导致 hover 状态频繁进出 - 使用
transition同时又用了@keyframes动画，两者冲突，比如opacity被动画覆盖后又因 class 移除被 transition 拉回，造成二次变化 - 框架（如 React）中 state 更新过快，两次 render 间隔小于
transition-duration，导致浏览器来不及完成第一次过渡就重置了起始值
过渡本身很老实，问题总出在“谁在推它”。盯住属性值变化的源头，比调 timing-function 更有效。
