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