CODEWITHSUNDEEP
csscss-animations
Netscape Navigator
Netscape Navigator

Reputation: 37

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

Upvotes: 2

Views: 65

Answers (2)

iorgu
iorgu

Reputation: 3043

Here's an alternative to font-style property's animation with skewing, as @herrstrietzel suggested above, like so:

.wrap {
  overflow: hidden;
  padding: 10px;
}

h1 {
  animation: slidein 3s infinite;
}

@keyframes slidein {
  from {
    transform: skew(0deg); /* Initial state */
  }

  to {
    transform: skew(-30deg); /* Skew to create an oblique-like effect */
  }
}
<div class="wrap">
  <h1>text</h1>
</div>

Upvotes: 1

herrstrietzel
herrstrietzel

Reputation: 17316

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.

Upvotes: 3

Related Questions