css过渡效果执行一次还是重复_通过transition-property和transition-timing-function控制

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 更有效。