I am trying to make a hover animation on the text. But, turns out my code don't result any frames. I mean the animation kinda rough not so smooth between transition from frame to frame.
@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"> </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>
I have tried to give transition: all ease
but didn't work either
I am stuck right now :(
Can you guys help me out? thank youuuuuu