文字悬停动画无过渡帧仅跳转关键帧，动画卡顿求助

问题根源分析 #

1. CSS语法错误：全局*选择器中的width: 100%px;是无效声明，会导致元素布局异常，间接影响动画流畅度。
2. 过渡配置不足：原过渡时长过短（0.2s）且未使用更自然的缓动函数，同时font-weight和font-stretch的过渡依赖可变字体的正确加载与浏览器支持。

修复步骤及代码调整 #

• 移除无效的width声明，修正全局样式
• 调整过渡参数，使用更平滑的缓动函数与合适时长
• 确保可变字体正确引入（若本地字体路径无误可忽略）

修改后的完整代码：

CSS部分

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans.woff2') format('woff2') tech('variations'),
         url('OpenSans-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

* {
    margin: 0;
    -ms-text-size-adjust: 150%;
    -webkit-text-size-adjust: 150%;
}

main {
    background-color: #000;
    margin: auto;
    padding: 60px;
    text-align: center;
}

.text-wrapper {
    font-family: "Open Sans";
    font-feature-settings: "ss02" on, "ss01" on;
}

.letter {
    --add: 0;
    font-size: 48px;
    position: relative;
    z-index: calc(1 + var(--add) * 2);
    display: inline-block;
    font-weight: calc(200 + 600 * var(--add));
    font-stretch: calc(100% + 25% * var(--add));
    color: white;
    /* 调整过渡参数，使用更平滑的缓动和时长 */
    transition: font-weight 0.3s ease-in-out, font-stretch 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.letter:hover {
    --add: 1;
    /* 添加缩放变换增强动画层次感 */
    transform: scale(1.05);
}

.letter:hover + .letter,
.letter:has(+ .letter:hover) {
    --add: 0.7;
}

.letter:hover + .letter + .letter,
.letter:has(+ .letter + .letter:hover) {
    --add: 0.45;
}

.letter:hover + .letter + .letter + .letter,
.letter:has(+ .letter + .letter + .letter:hover) {
    --add: 0.2;
}

HTML部分

<main>
    <div class="div">
        <h2 class="text-wrapper">
            <span class="letter">S</span><span class="letter">a</span><span class="letter">m</span><span class="letter"></span><span class="letter">p</span><span class="letter">l</span><span class="letter">e</span><span class="letter">&nbsp;</span>
            <span class="letter">T</span><span class="letter">e</span><span class="letter">x</span><span class="letter">t</span><span class="letter">.</span>
        </h2>
    </div>
</main>

额外说明 #

• 确保OpenSans.woff2和OpenSans-VF.woff2文件路径正确，可变字体是实现font-weight和font-stretch平滑过渡的核心。
• 若浏览器版本较旧，:has选择器可能不生效，建议升级至现代浏览器（Chrome 105+、Firefox 121+等）。

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