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

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 >
        <h2 >
          <span >S</span><span >a</span><span >m</span><span ></span><span >p</span><span >l</span><span >e</span><span >&nbsp;</span>
          <span >T</span><span >e</span><span >x</span><span >t</span><span >.</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

CodePudding user response：

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 >
    <h2 >
      <span >S</span><span >a</span><span >m</span><span ></span><span >p</span><span >l</span><span >e</span><span >&nbsp;</span>
      <span >T</span><span >e</span><span >x</span><span >t</span><span >.</span>
    </h2>
  </div>
</main>