safariでkeyframeによるanimationが実行されない

前提・実現したいこと

お世話になります。
ブロックが横から流れてくるアニメーションを実装したいのですが、PC上のchromeでは正常に動作するものの、safari(pc/sp)、chrome(sp)では動作が実行されません。
その前後に書いている他のアニメーションは正常に実行されているので、この部分だけできていないようです。

いろいろ試みたのですが、わからなかったのでどなたかご助言を頂けましたら幸いです。

該当のソースコード

html
1<div class="animation-sh-in">
2  <p class="animation-sh-child">test</p>
3</div>
4
5~~~中略~~~
6
7<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
8<script>
9    $(function(){
10        var style = '<link rel="stylesheet" href="/css/anime.css">';
11        $('head link:last').after(style);
12    });
13  </script>

js
1$('.animation-sh-in').each(function() {
2        var target = $(this).offset().top;
3        var scroll = $(window).scrollTop();
4        var windowHeight = $(window).height();
5        if (scroll > target - windowHeight + 100){
6          $(this).addClass('animation-sh-in-do');
7        }
8});

css
1.animation-sh-in-do {
2  display:inline-block;
3  overflow: hidden;
4  position: relative;
5}
6.animation-sh-in-do::before {
7  content: "";
8  position: absolute;
9  left: 0;
10  top: 0;
11  height: 100%;
12  background-color:#bb9535;
13}
14.animation-sh-in-do::before {
15  animation: secondaryImageOverlayIn 1s 0s cubic-bezier(.77,0,.175,1);
16  -webkit-animation: secondaryImageOverlayIn 1s 0s cubic-bezier(.77,0,.175,1);
17  animation-fill-mode: both;
18  -webkit-animation-fill-mode: both;
19}
20@keyframes secondaryImageOverlayIn {
21  0% {
22    width: 0;
23  }
24  100% {
25    width:  100%;
26  }
27}
28@-webkit-keyframes secondaryImageOverlayIn {
29  0% {
30    width: 0;
31  }
32  100% {
33    width:  100%;
34  }
35}

試したこと

・アニメーションに関するcssを別ファイルにして、dom読み込み後に読み込ませると直るとの記事を見て試みましたが変化ありませんでした。
・検証ツールで、animation-sh-in-do::beforeのanimationをコメントアウトした状態で-webkit-animationを「コメントアウト→コメントアウトを消して有効に」という動作を行ったところ、アニメーションは実行されました。