如何实现元素hover时平滑放大，离开时平滑恢复原尺寸？

你当前使用animation实现hover放大的方式，只会在鼠标悬停时执行一次动画并停在最终状态，但鼠标移开时没有对应的反向过渡逻辑，导致元素瞬间恢复原尺寸。更简洁可靠的方案是使用transition属性，它能自动处理属性变化的双向过渡（悬停放大、移开缩小）。

修复后的完整代码 #

<!DOCTYPE html>
<style>
    div {
        display: inline-block;
        text-align: center;
    }
    a {
        margin: 0 5px;
        font-size: 20px;
        /* 指定过渡属性、时长和缓动效果 */
        transition: font-size 0.3s ease;
    }
    a:hover {
        text-shadow: 0 0 0px #fff;
        font-size: 25px;
    }
</style>
<div>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
</div>

核心修改说明 #

• 移除原有的animation和@keyframes代码，在a的基础样式中添加transition属性，明确指定对font-size的变化应用0.3秒的平滑过渡。
• hover状态下只需直接设置目标font-size，无需额外动画逻辑——transition会自动处理从20px到25px的放大过渡，鼠标移开时也会自动触发从25px回到20px的缩小过渡。
• 如果需要同时过渡text-shadow等其他属性，可将transition值改为all 0.3s ease;，让所有可过渡属性的变化都应用相同的平滑效果。

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