These examples explore a Typetura inspired style of changing CSS font-variation-settings via CSS keyframe animation.

Typetura influnced using CSS-Animations that are paused (not animating) and which animation position is accessed via a negative value for CSS animation-delay, this is used to access a specific point in the animation timeline. That animation position in these cases depends on screen-size, more specifically, screen-width.

This should help with reducing @media queries based break points because we can create a fluid transitions when screen sizes change.