css Question posted in
Some basic documentation can be found here.

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;
                }
            }
Tags:

2

Answers


  1. 0

    We can’t animate the font-style property. Instead, we can mimic the same with skewing, like so:

    h1 {
  animation: slidein 3s forwards;
}

@keyframes slidein {
  from {
    transform: skew(0deg); /* Initial state */
  }
  to {
    transform: skew(-30deg); /* Skew to create an oblique-like effect */
  }
}
    <h1>text</h1>

    And font-style can’t have a deg value, afaik…

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search