如何使用CSS为含锚点标签的按钮添加悬停箭头右移动画

问题原因 #

现有代码无法实现平滑动画的核心原因是 display 属性不属于CSS过渡可生效属性，从 none 切换到 block 会直接跳变，过渡动画不会触发。

修改后的完整CSS代码 #

.btnContainer{
    background: #fb8ab0;
    border: none;
    padding: 1rem 2rem;
    text-decoration: none;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    word-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: ease-out .5s;
    justify-content: center;
    cursor: pointer;
}

.homeBtn{
    color: white;
    text-decoration: none;
}

.rightArrow{
    opacity: 0;
    transform: translateX(-0.8rem);
    transition: all ease-out .3s;
}

.btnContainer:hover .rightArrow{
    opacity: 1;
    transform: translateX(0);
}

修改说明 #

• 用opacity+transform组合替代display切换，两个属性均支持CSS过渡，可以实现平滑的淡入+右移动画效果
• 用transform: translateX做位移性能更高，不会触发布局重排，动画流畅度优于修改margin
• 可根据视觉需求自行调整位移距离、过渡时长，匹配按钮整体风格

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