Why my hovering text don't resulting any frames? only jump to keyframes?

Issue

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

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

Solution

CSS properties cannot be animated, as the browser does not know what type they are. However, modern browsers support @property, which lets us define, among many things, the type. This allows it to be animated (and transitioned). Can I Use @property?

You simply need to add the definition before the property is used.

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

Working Example:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,[email protected],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>

Answered By – Allan J.

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published