为什么我的悬停文本不会产生任何框架？只跳到关键帧？

Question

我正在尝试在文本上制作悬停动画。但是，我的代码没有产生任何帧。我的意思是动画有点粗糙，帧与帧之间的过渡不太流畅。

@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;
width: 100%px;
-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: unset;
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: transform 0.2s, color 0.2s, font-stretch 0.2s, font-weight 0.2s;
}
.letter:hover {
--add: 1;
}
.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;
}

<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>

我试图给transition: all ease，但没有工作我现在被卡住了。你们能帮帮我吗?谢谢youuuuuu

Answer 1

CSS属性不能动画，因为浏览器不知道它们是什么类型。然而，现代浏览器支持@property，它允许我们定义类型。这允许它被动画化(和转换)。我可以使用@property吗?

您只需要在使用属性之前添加定义。

@property --add {
syntax: '<number>';
inherits: true;
initial-value: 0;
}

工作的例子:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800&display=swap');
@property --add {
syntax: '<number>';
inherits: true;
initial-value: 0;
}

/* I'm using google fonts so that the you can see it in the sample */

/* @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;
width: 100%px;
-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: unset;
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: transform 0.2s, color 0.2s, font-stretch 0.2s, font-weight 0.2s, --add 0.2s;
}
.letter:hover {
--add: 1;
}
.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;
}

<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>