safariでcssアニメーションが連続すると(?)動作が不安定になる。

お世話になっております。

サムネイルや矢印をクリックすることでclassを付与し、
メイン画像を切り替えるギャラリーのようなものを作成しております。

画像を切り替える際、アニメーションで画像がスライドして表示されるようにしているのですが、
アニメーションの動作がsafariの時のみ不安定になってしまいます。chrome、firefoxは当方の環境では問題ありませんでした。

特に、 < > の矢印ボタンを連打した際に起こります。
ただ、すぐに発生する場合もあれば、しつこく連打しないと起こらない場合もあります。

codepenはこちらです

検証で確認いたしましたところ、クリックイベント自体は動いているのですが、
アニメーションのクラス「.scroll_img」がうまく外れておらず、ついたままになっているからかなと
思ったのですが、表示が不安定な原因とは結び付かず、

こちらを参考にアニメーションのcssを
後で読み込みにもしてみたのですが改善にはいたりませんでした。

上記現象が発生すると、同じアニメーションを使用している別のセクションでも
アニメーションが発生しない不具合が連動して起こってしまいます。

例えば、メニューセクションでアニメーションが動かなくなったとき、となりのギャラリーセクションでも同じようになる、
といった感じです。クリックイベントはそれぞれ別になっております。

アニメーションが動かないと画像にマスクがかかったまま表示されないことになってしまうため、
困っております。

どなたか、ご教示いただけませんでしょうか。
以下、コードになります。よろしくお願いいたします。

html
1      <section id="cafe_menu" class="bl_menu ly_section">
2         <h2>メニューセクション</h2>
3        <p id="menu_prev" class="bl_menu_arrow bl_arrow_left"></p>
4        <p id="menu_next" class="bl_menu_arrow bl_arrow_right"></p>
5        <div class="ly_inner">
6          <div class="el_cb bl_menu_slideContent current">
7            <div class="bl_menu_imgWrapper scroll">
8              <img src="https://placehold.jp/1500x800.png" alt="">
9            </div>
10            <div class="bl_menu_body fade">
11              <h3 class="el_lv3_ttl">オリジナルコーヒー</h3>
12              <div class="bl_menu_txt">
13                説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
14            </div>
15          </div>
16          <div class="el_cb bl_menu_slideContent">
17            <div class="bl_menu_imgWrapper">
18              <img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="">
19            </div>
20            <div class="bl_menu_body fade">
21              <h3 class="el_lv3_ttl">オリジナルコーヒー2</h3>
22              <div class="bl_menu_txt">
23                2説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
24            </div>
25          </div>
26          <div class="el_cb bl_menu_slideContent">
27            <div class="bl_menu_imgWrapper">
28              <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="">
29            </div>
30            <div class="bl_menu_body fade">
31              <h3 class="el_lv3_ttl">オリジナルコーヒー3</h3>
32              <div class="bl_menu_txt">
33                3説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
34            </div>
35          </div>
36          <ul id="menu_thumbs" class="bl_img_thumbUnit">
37            <li class="current"><img src="https://placehold.jp/1500x800.png" alt="サムネイル"></li>
38            <li><img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></li>
39            <li><img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></li>
40          </ul>
41        </div>
42      </section><!-- /#cafe_menu .ly_section -->
43      <section id="garally" class="ly_section ly_inner bl_garally">
44        <h2 class="el_lv2_ttl">GARALLYセクション</h2>
45        <div class="bl_garally_wrapper">
46          <div class="el_cb bl_garally_body">
47            <div class="bl_garally_txt"> テキストがはいりますテキストがはいりますテキストがはいりますテキストがはいります<br>
48              テキストがはいりますテキストがはいりますテキストがはいりますテキストがはいります<br> テキストがはいりますテキストがはいりますテキストがはいりますテキストがはいりますテキストがはいります </div>
49          </div><!-- /.bl_garally_body -->
50          <div class="bl_garally_imgUnit">
51            <div class="bl_garally_imgs">
52              <div class="garally_img  bl_garally_img scroll current">
53                <img src="https://placehold.jp/1500x800.png" alt="メインイメージが入ります">
54              </div>
55              <div class="garally_img bl_garally_img">
56                <img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="メインイメージが入ります">
57              </div>
58              <div class="garally_img bl_garally_img">
59                <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="メインイメージが入ります">
60              </div>
61            </div><!-- /.bl_garally_imgs -->
62            <ul id="garally_thumbs" class="bl_img_thumbUnit">
63              <li class="current"><img src="https://placehold.jp/1500x800.png" alt="サムネイル"></li>
64              <li><img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></li>
65              <li><img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></li>
66            </ul>
67          </div>
68        </div><!-- /.bl_garally_wrapper -->
69      </section><!-- /#garally .ly_section -->
70
71  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
72

css
1/* animation */
2@keyframes scroll_img {
3  100% {
4    transform: translateX(100%);
5  }
6}
7
8.scroll_img::before {
9  animation: scroll_img 1s cubic-bezier(.4, 0, .2, 1) forwards;
10  content: '';
11  background: #fff;
12  bottom: 0;
13  left: 0;
14  right: 0;
15  top: 0;
16  z-index: 1;
17  pointer-events: none;
18  position: absolute;
19}
20
21/* block */
22.bl_menu {
23  position: relative;
24}
25
26.bl_menu_slideContent {
27  width: 100%;
28  margin: auto;
29  background: pink;
30  padding: 30px 20px;
31}
32.bl_menu_arrow {
33  position: absolute;
34  top: 30%;
35  width: 60px;
36  height: 60px;
37  &:hover {
38    cursor: pointer;
39  }
40  &.bl_arrow_left {
41    left: 5%;
42    border-top: 1px solid #333;
43    border-left: 1px solid #333;
44    transform: rotate( -45deg );
45  }
46  &.bl_arrow_right {
47    right: 0%;
48    border-top: 1px solid #333;
49    border-left: 1px solid #333;
50    transform: rotate( -225deg );
51
52  }
53}
54.bl_menu_imgWrapper {
55    position: relative;
56  overflow: hidden;
57  height: 0;
58  padding-top: 50%;
59  & > img {
60    position: absolute;
61    top: 50%;
62    width: 100%;
63    height: 100%;
64    transform: translateY( -50% );
65    object-fit: cover;
66    font-family: 'object-fit: contain;' /*ie*/
67  }
68  
69  &:before {
70    background: pink;
71  }
72}
73.bl_menu .bl_img_thumbUnit {
74  width: 100%;
75  margin-right: auto;
76  margin-left: auto;
77}
78
79/* for js */
80.bl_menu_slideContent {
81  display: none;
82}
83.bl_menu_slideContent.current {
84  display: block;
85}
86
87
88/*  ギャラリーセクション */
89.bl_garally_imgUnit {
90  max-width: 844px;
91  width: 100%;
92}
93.bl_garally_img {
94  width: 100%;
95    position: relative;
96  overflow: hidden;
97  height: 0;
98  padding-top: 60%;
99  & > img {
100    position: absolute;
101    top: 50%;
102    width: 100%;
103    height: 100%;
104    transform: translateY( -50% );
105    object-fit: cover;
106    font-family: 'object-fit: contain;' /*ie*/
107  }
108}
109.bl_img_thumbUnit {
110  display: flex;
111  justify-content: flex-end;
112  margin-top: 7px;
113  & img {
114    width: 80px;
115    margin-left: 7px;
116    cursor: pointer;
117  }
118  & li img{
119    border: 2px solid transparent;
120    transition: border .3s;
121  }
122  & li.current img{
123    border: 2px solid #333;
124  }
125}
126/* for js */
127.garally_img {
128  display: none;
129}
130.garally_img.current {
131  display: block;
132}
133
134.ly_section {
135  max-width: 500px;
136  padding-left: 50px;
137  padding-right: 50px;
138  margin-left: auto;
139  margin-right: auto;
140}
141
142ul li {
143  list-style: none;
144}

jQuery
1jQuery(function ($) {
2  /* for menu section */
3  $('#menu_thumbs li').on('click', function () {
4    var index = $('#menu_thumbs li').index(this);
5    $(this).addClass("current").siblings(".current").removeClass("current");
6
7    $('.bl_menu_slideContent').removeClass('current').eq(index).addClass('current');
8
9    $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(index).addClass('scroll_img');
10  });
11
12  $('#menu_next').on('click', function () {
13    var length = $('#menu_thumbs li').length;
14    var current = $('#menu_thumbs li.current');
15    var i = $('#menu_thumbs li').index(current);
16
17    if ((i + 1) < length) {
18      $('#menu_thumbs li').eq(i + 1).addClass("current").siblings(".current").removeClass("current");
19      $('.bl_menu_slideContent').eq(i + 1).addClass('current').siblings(".current").removeClass('current');
20
21      $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(i + 1).addClass('scroll_img');
22
23    } else {
24      $('#menu_thumbs li').eq(0).addClass("current").siblings(".current").removeClass("current");
25      $('.bl_menu_slideContent').eq(0).addClass('current').siblings(".current").removeClass('current');
26      $('.bl_menu_imgWrapper').removeClass('scroll_img').eq(0).addClass("scroll_img")
27    }
28   
29  });
30
31  $('#menu_prev').on('click', function () {
32    var current = $('#menu_thumbs li.current');
33    var i = $('#menu_thumbs li').index(current);
34
35    $('#menu_thumbs li').eq(i - 1).addClass("current").siblings(".current").removeClass("current");
36    $('.bl_menu_slideContent').eq(i - 1).addClass('current').siblings(".current").removeClass('current');
37
38    $('.bl_menu_imgWrapper').addClass('scroll_img');
39 
40  });
41  
42  
43    /* for garally section */
44  $('#garally_thumbs img').on('click', function () {
45    var index = $('#garally_thumbs img').index(this);
46    console.log(index);
47    $(this).parent().addClass("current").siblings(".current").removeClass("current");
48    $('.garally_img').removeClass('current').eq(index).addClass('current');
49    $('.garally_img').removeClass('scroll_img').eq(index).addClass('scroll_img');
50
51  });
52
53});