font variable animeren met css

[yujing-student]

No description provided.

[yujing-student]

https://wakamaifondue.com/

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings

hier kan je het font aanpassen en animeren met css

[lisagjh]

Verschrikkelijk vervelende animatie maar stiekem toch wel leuk?

h1 {
    animation: welcome 1.5s ease-in-out 12 alternate;
  }

  h1:hover {
    animation-play-state: paused;
  }

  @keyframes welcome {
    0% {
      font-weight: 100;
      letter-spacing: .5rem;
    }
    30% {
      font-weight: 900;
      letter-spacing: -.5rem;
    }
    60% {
      font-weight: 100;
      letter-spacing: -.5rem;
    }
    100% {
      font-weight: 900;
      letter-spacing: .5rem;
    }
  }

Misschien leuk om te kijken of we iets kunnen doen per letter?