如何解决CSS Transition鼠标移出后元素瞬间回弹问题？

问题出在你的链接默认状态下未定义border属性，仅在:hover状态添加了该属性。CSS过渡要求目标属性在初始状态和触发状态都存在才能实现平滑动画，因此鼠标移出时，由于初始状态没有border，浏览器无法执行过渡，直接跳回初始状态。

修正后的代码 #

<style>
    .Homeb {
        background-color: rgb(167, 0, 0);
        border: 5px solid rgb(167, 0, 0);
        border-radius: 5px;
    }

    a.home {
        transition: all 0.4s ease-in-out;
        background-color: rgb(167, 0, 0);
        border: 5px solid rgb(167, 0, 0); /* 添加默认状态的border属性 */
        border-radius: 5px;
        display: inline-block; /* 可选：防止边框变化导致布局偏移 */
    }

    a.home:hover {
        /* 可修改hover时的属性（例如下方的边框颜色），否则hover无视觉变化 */
        border-color: #ffffff;
        /* 也可调整背景色等其他属性 */
        /* background-color: rgb(200, 0, 0); */
    }
</style>

<body>
    <header>
        <nav>
            <ul>
                <li class="Homeb">
                    <a href="index.html" class="home">text</a>
                </li>
            </ul> 
        </nav>
    </header>
</body>

关键说明 #

• 在a.home的默认样式中添加border属性，让过渡效果有明确的初始值可返回
• 若需要hover时的视觉反馈，需修改:hover状态下的属性值（如边框颜色、背景色），否则hover操作不会产生任何可见变化
• 可选添加display: inline-block，避免边框宽度变化时触发页面布局偏移

内容的提问来源于stack exchange，提问作者wallfall