animation-timing-functionにstepsを使うことで、CSSアニメーションをイージングではなく段階で変化させることができる。stepsにはjumptermというのを指定することで、0%と100%を停止点として使用するかどうかを選択できる。

animation-timing-function: steps(5, start);
// 20%, 40%, 60%, 80%, 100%

animation-timing-function: steps(5, end);
// 0%, 20%, 40%, 60%, 80%

animation-timing-function: steps(5, jump-none);
// 0%, 25%, 50%, 75%, 100%

jump-noneを指定すると、0%, 25%, 50%, 75%, 100% の五段階でアニメーションされる。感覚的には0%と100%の状態が見えるのがありそうなケースなので、jump-noneが最も使い勝手が良さそうに思う。
だが、Can I useを見ると、Safari（iOS Safari）では、2020年9月のリリースされたver.14でサポートされたばかりようのだ。なので、jump-noneを使わない方法を考えたい。

結論を言えば、keyframesの方を書き換えることで実現できる。

See the Pen
without jump-none on animation-timing-function by HieroglypH (@hieroglyph3)
on CodePen.

上記は、青いゲージのwidthが0％〜100％に変化するCSSアニメーションだ。
steps(5, jump-none)と同じ動きを、jump-noneを使わないで実装しようと思うと、keyframesの100%は、125%状態のスタイルを書く。（逆に言うと、80%時点で100%に達するように書く。）

もちろん、これは段階数が5の場合だ。
4段階なら、100%時点で133.33…%状態のスタイル
6段階なら、100%時点で120%状態のスタイル
keyframesを工夫すれば、jump-noneは使わなくても概ね乗り切れるかもしれない。