与“transition”相关的TAG标签

:hover伪类需配合可交互元素使用，现代浏览器虽支持div:hover但语义差；必须显式声明transition才生效，且应写在默认状态中，优先使用transform和opacity等高性能属性。

优先使用框架原生卡片类（如Bootstrap.card），因其内置样式完整；Tailwind需组合原子类，推荐bg-whiterounded-lgborderborder-gray-200shadow-smp-4；垂直堆叠用mb-4+末项mb-0，Grid/Flex中改用gap-4更可靠。

要使颜色悬停变化平滑，须在常态规则中声明transition:color0.25scubic-bezier(0.4,0,0.2,1)，统一用十六进制色值，并确保全程对比度7:1。

清除浮动在现代布局中越来越不必要，因为float本为图文环绕设计，用其做布局需靠clear等补丁方案解决塌陷等问题；flexbox等现代方案更语义化、无需清除。

加载动画必须用@keyframes显式定义循环，配合infinite、linear及transform-origin；仅用transition无法自启动；须仅使用transform和opacity等合成层友好属性以避免重排卡顿。

只让CSS过渡作用于某一个属性需明确设置transition-property，如仅color过渡；避免用all或省略导致意外动画；可逗号分隔多个属性，设none禁用过渡；配合timing-function和delay可精准控制效果。

font-size支持transition，但仅限px、em、rem、vh等可计算数值单位；关键字、inherit、unset等不可插值。常见失效原因包括父元素字体变化导致计算链断裂、!important覆盖、优先级不足、未显式声明初始值等。

图片悬停放大必须用transition控制transform的平滑变化，推荐transition:transform0.3scubic-bezier(0.25,0.46,0.45,0.94)并设置transform-origin和will-change以避免抖动、闪屏及偏移问题。

text-shadow动画常失效是因为必须显式声明x、y、blur、color四个值，缺一则退化为离散切换；需统一单位、全用rgba、保持层数一致，且Safari旧版仅支持@keyframes。

图片hover边框生硬问题的解决核心是：默认设置同背景色边框、transition写在常态样式中、仅过渡border-color属性。需避免transparent/none边框、不用all过渡、确保display和box-sizing规范。