Search code examples
csscss-animations

CSS animation with the oblique

I'm trying to make a simple text animation with CSS. The text should slowly change value of font-style attribute.

I have tried something like this:

 h1 {
                animation-duration: 3s;
                animation-name: slidein;
            }
            @keyframes slidein {
                from {
                    font-style: oblique 30deg;
                }
                to {
                    font-style: oblique 0deg;
                }
            }
Solution

  • Provided, you're using a variable font including a slant design axis you can interpolate between different slanting angles:

    body{
  font-size:6vw;
  font-family: "Cairo";
}

/** latin **/
@font-face {
  font-family: "Cairo";
  src: url("https://fonts.gstatic.com/s/cairo/v28/SLXGc1nY6HkvalIhTpumw9t1QX8.woff2")
    format("woff2");
  font-style: oblique -11deg 11deg;
  font-weight: 200 1000;
}


.aniStyle {
  animation: aniStyle 3s infinite;
}

.aniSlant {
  animation: aniSlant 3s infinite;
}


@keyframes aniStyle {
  0% {
    font-style: oblique -11deg;
  }
  50% {
    font-style: oblique 11deg;
  }
  100% {
    font-style: oblique -11deg;
  }
}

@keyframes aniSlant {
  0% {
    font-variation-settings: "slnt" 11;
  }
  50% {
    font-variation-settings: "slnt" -11;
  }
  100% {
    font-variation-settings: "slnt" 11;
  }
}
    <h1 class="aniStyle">Hamburgefonsle</h1>
<h1 class="aniSlant">Hamburgefonsle</h1>

    Some browsers may not support transitions/animations for the font-style property. Apparently, animating the font-variation-settings property currently supports the best cross browser compatibility (Firefox, Chromium, Webkit/safari.

    Keep in mind font animations are not well optimized compared to CSS transformations – so the transform/skew approach may be a more performant alternative.