CSS hover过渡实现元素从中心向外拓宽的问题求助

嘿，我帮你搞定这个背景展开的效果，先梳理下问题根源，再给你两个靠谱的解决方案～

首先纠正一个代码笔误 #

你原来的CSS里，a标签最后一行写了transform:1s;，这是语法错误，应该是transition:.1s;（用来设置过渡属性），这个笔误会直接导致过渡效果异常，先改过来！

为什么你之前加transform: translate(-50%, 0);会晃动？ #

你尝试给a:hover::before加translate，是想把从左到右的展开改成中心展开，但伪元素初始是left:50%+width:0%，hover时同时修改width:100%和translate(-50%,0)，相当于同时调整宽度和位置两个属性，这种多属性的过渡计算容易出现渲染偏移，再加上之前的笔误，就会出现晃动问题。

方案一：用transform: scaleX()实现（推荐，平滑无晃动） #

这种方式利用CSS transform的缩放效果，以中心为原点缩放，过渡更平滑，而且transform是GPU加速属性，不会出现布局晃动。

修改后的完整CSS代码：

body{ 
    margin:0; 
    padding:0; 
    background-color:#262626; 
} 
a{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    padding:10px 25px; 
    border:2px solid white; 
    text-decoration:none; 
    color:white; 
    font-family:verdana; 
    font-size:27px; 
    text-transform:uppercase; 
    letter-spacing:4px; 
    transition:.1s; /* 修正笔误 */
} 
a::before{ 
    content:''; 
    position:absolute; 
    height:100%; 
    width:100%; /* 初始宽度铺满a标签 */
    top:0; 
    left:0; /* 定位到a标签左上角 */
    z-index:-1; 
    background-image:linear-gradient(45deg, #eea949,#ff3984); 
    transition:.5s; 
    transform: scaleX(0); /* 初始X轴缩放为0，完全隐藏 */
    transform-origin: center center; /* 缩放原点设置为中心 */
} 
a:hover::before{ 
    transform: scaleX(1); /* hover时缩放回100%，从中心向外展开 */
}

方案二：同时调整left和width实现 #

如果你更倾向于用宽度变化的方式，也可以同时调整伪元素的left和width属性，注意保持过渡时间一致：

修改后的伪元素部分代码：

a::before{ 
    content:''; 
    position:absolute; 
    height:100%; 
    width:0%; 
    top:0; 
    left:50%; /* 初始定位在中心 */
    z-index:-1; 
    background-image:linear-gradient(45deg, #eea949,#ff3984); 
    transition:.5s ease; /* 用ease曲线让过渡更自然 */
} 
a:hover::before{ 
    width:100%; 
    left:0; /* hover时宽度铺满，同时定位到左上角，实现中心向两边展开 */
}

这个方案也能实现效果，但因为同时修改两个布局属性（left和width），在部分浏览器可能会有细微的抖动，所以还是更推荐方案一。

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