Animating font-feature-settings with CSS not working in Safari

101 Views Asked by At

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>

0

There are 0 best solutions below