I'd like to change the font-feature settings of a font that has different stylistic sets using CSS keyframes. I use different font-feature settings outside of the animation on the same webpage, which works in both Chrome and Safari. I also use CSS keyframe animations, which also works fine in Safari. However, when I try to animate the font-feature-settings, Safari lets me down.
Here is my CSS:
.animate {
animation: animateFont 2s linear infinite;
}
@keyframes animateFont {
0% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
color: white;
}
50% {
font-feature-settings: "ss02" 1;
-webkit-font-feature-settings: "ss02" 1;
-moz-font-feature-settings: "ss02" 1;
-ms-font-feature-settings: "ss02" 1;
color: red;
}
100% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
color: white;
}
}
I found a lot of stuff on animations generally not working in Safari but nothing specifically on font-feature-settings. Does anyone know a CSS way to get this working?
Edit: This is an example of a ligature animatio that does work in Chrome but not in Safari.
.animate-font {
animation: animateFont 2s linear infinite;
font-size: 100px;
}
@keyframes animateFont {
0% {
font-feature-settings: "smcp" 1;
-webkit-font-feature-settings: "smcp" 1;
-moz-font-feature-settings: "smcp" 1;
-ms-font-feature-settings: "smcp" 1;
}
50% {
font-feature-settings: "liga" 0;
-webkit-font-feature-settings: "liga" 0;
-moz-font-feature-settings: "liga" 0;
-ms-font-feature-settings: "liga" 0;
}
100% {
font-feature-settings: "ss01" 1;
-webkit-font-feature-settings: "ss01" 1;
-moz-font-feature-settings: "ss01" 1;
-ms-font-feature-settings: "ss01" 1;
}
}
<div class="animate-font">
fi
</div>