CSS设置transition后hover时border无过渡瞬间消失如何解决

border: none 无法触发过渡动画：CSS的transition仅能对可计算插值的数值类属性值生成补间动画，none是无中间状态的关键字，浏览器会在hover触发的瞬间直接切换状态，无论设置多长的过渡时长都不会产生渐变效果。

另外你当前代码还有一个小问题：transition属性写在了:hover状态下，就算边框问题修复，鼠标移出元素时也会瞬间跳回初始状态，不会有反向过渡效果。

解决方案1：透明边框替代border: none（实现成本最低） #

保留边框原有宽度，仅将边框颜色修改为透明，颜色属于可过渡属性，就能实现平滑的边框消失效果，修改后的代码如下：

.explore{
    margin-top: 2.5rem;
    width: 15rem;
    height: 4rem;
    text-align: center;
    display: block;
    font-size: 2rem;
    border: 0.1rem solid #000;
    border-radius: 2.5rem;
    margin-left: 1.5rem;
    position: relative;
    z-index: 1;
    /* 过渡属性写在元素默认态，移入移出都会触发动画 */
    transition: all 2s ease;
    /* 固定盒模型计算规则，避免边框变化引发布局抖动 */
    box-sizing: border-box;
}

.explore a{
    display: block;
    text-decoration: none;
    font-size: 2rem;
    color: #000;
    text-align: center;
    margin-top: 0.7rem;
}

.explore:hover { 
    top: 1rem;
    right: 1.4rem;
    /* 删除border: none，替换为透明色边框 */
    border-color: transparent;
    text-align: center;
    transform: translateY(0.1rem) translateX(-1rem);
}

解决方案2：box-shadow模拟边框（交互质感更好） #

如果想要更丝滑的渐隐效果，同时配合背景填充的柔和过渡，可以不用原生border属性，改用无偏移的外阴影模拟边框，阴影的动画流畅度更高，也不会影响元素本身的盒模型尺寸：

.explore{
    margin-top: 2.5rem;
    width: 15rem;
    height: 4rem;
    text-align: center;
    display: block;
    font-size: 2rem;
    border-radius: 2.5rem;
    margin-left: 1.5rem;
    position: relative;
    z-index: 1;
    /* 用0偏移外阴影模拟0.1rem黑色边框 */
    box-shadow: 0 0 0 0.1rem #000;
    transition: all 2s ease-out;
    background: transparent;
}

.explore a{
    display: block;
    text-decoration: none;
    font-size: 2rem;
    color: #000;
    text-align: center;
    margin-top: 0.7rem;
}

.explore:hover { 
    top: 1rem;
    right: 1.4rem;
    /* 阴影改为透明，实现边框渐隐 */
    box-shadow: 0 0 0 0.1rem transparent;
    text-align: center;
    transform: translateY(0.1rem) translateX(-1rem);
    /* 直接在按钮上加背景色过渡，不需要额外写explore-hover空层 */
    background: #f1e0d4;
}

这种写法可以直接删掉你代码里单独定义的空.explore-hover元素，代码结构更简洁，过渡效果也更统一。

避坑提示 #

• 不要用border-width: 0实现边框消失：就算加了box-sizing: border-box，边框宽度从0.1rem变为0的过程中，元素内部可用空间会持续变化，容易导致文字位置偏移抖动。
• 过渡缓动函数推荐用ease-out，比默认线性过渡的手感更自然，更接近高端站点的交互质感。

内容的提问来源于stack exchange，提问作者Alıyev Rufet