cssのみでカルーセルを作成したい。

CSSのみでカルーセルを作成しております。
＜現状＞
chromeでカルーセルは自動でスライドしている。
Safariは自動でスライドしない。

＜解決したいこと＞
Safariでも自動でスライドできるようにしたい。
もしくは違うやり方があれば教えてください。

※自動スライドイメージ

html
1<body class="new_sp_top">
2  <main>
3    <section class="carousel" aria-label="Gallery">
4      <ol class="carousel__viewport">
5        <li id="carousel__slide1"
6            tabindex="0"
7            class="carousel__slide">
8          <div class="carousel__snapper">
9            <a href="#carousel__slide4"
10               class="carousel__prev">Go to last slide</a>
11            <a href="#carousel__slide2"
12               class="carousel__next">Go to next slide</a>
13          </div>
14        </li>
15        <li id="carousel__slide2"
16            tabindex="0"
17            class="carousel__slide">
18          <div class="carousel__snapper"></div>
19          <a href="#carousel__slide1"
20             class="carousel__prev">Go to previous slide</a>
21          <a href="#carousel__slide3"
22             class="carousel__next">Go to next slide</a>
23        </li>
24        <li id="carousel__slide3"
25            tabindex="0"
26            class="carousel__slide">
27          <div class="carousel__snapper"></div>
28          <a href="#carousel__slide2"
29             class="carousel__prev">Go to previous slide</a>
30          <a href="#carousel__slide4"
31             class="carousel__next">Go to next slide</a>
32        </li>
33        <li id="carousel__slide4"
34            tabindex="0"
35            class="carousel__slide">
36          <div class="carousel__snapper"></div>
37          <a href="#carousel__slide3"
38             class="carousel__prev">Go to previous slide</a>
39          <a href="#carousel__slide1"
40             class="carousel__next">Go to first slide</a>
41        </li>
42      </ol>
43      <aside class="carousel__navigation">
44        <ol class="carousel__navigation-list">
45          <li class="carousel__navigation-item">
46            <a href="#carousel__slide1"
47               class="carousel__navigation-button">Go to slide 1</a>
48          </li>
49          <li class="carousel__navigation-item">
50            <a href="#carousel__slide2"
51               class="carousel__navigation-button">Go to slide 2</a>
52          </li>
53          <li class="carousel__navigation-item">
54            <a href="#carousel__slide3"
55               class="carousel__navigation-button">Go to slide 3</a>
56          </li>
57          <li class="carousel__navigation-item">
58            <a href="#carousel__slide4"
59               class="carousel__navigation-button">Go to slide 4</a>
60          </li>
61        </ol>
62      </aside>
63    </section>
64  </main>
65</body>

css
1@-webkit-keyframes tonext {
2  75% {
3    left: 0;
4  }
5  95% {
6    left: 100%;
7  }
8  98% {
9    left: 100%;
10  }
11  99% {
12    left: 0;
13  }
14}
15
16@keyframes tonext {
17  75% {
18    left: 0;
19  }
20  95% {
21    left: 100%;
22  }
23  98% {
24    left: 100%;
25  }
26  99% {
27    left: 0;
28  }
29}
30
31@-webkit-keyframes tostart {
32  75% {
33    left: 0;
34  }
35  95% {
36    left: -300%;
37  }
38  98% {
39    left: -300%;
40  }
41  99% {
42    left: 0;
43  }
44}
45
46@keyframes tostart {
47  75% {
48    left: 0;
49  }
50  95% {
51    left: -300%;
52  }
53  98% {
54    left: -300%;
55  }
56  99% {
57    left: 0;
58  }
59}
60
61@-webkit-keyframes snap {
62  96% {
63    scroll-snap-align: center;
64  }
65  97% {
66    scroll-snap-align: none;
67  }
68  99% {
69    scroll-snap-align: none;
70  }
71  100% {
72    scroll-snap-align: center;
73  }
74}
75
76@keyframes snap {
77  96% {
78    scroll-snap-align: center;
79  }
80  97% {
81    scroll-snap-align: none;
82  }
83  99% {
84    scroll-snap-align: none;
85  }
86  100% {
87    scroll-snap-align: center;
88  }
89}
90
91.new_sp_top {
92  max-width: 576px;
93  margin: 0 auto;
94  background-color: #FBFBFB;
95}
96
97.new_sp_top * {
98  -webkit-box-sizing: border-box;
99          box-sizing: border-box;
100  scrollbar-color: transparent transparent;
101  /* thumb and track color */
102  scrollbar-width: 0px;
103}
104
105.new_sp_top *::-webkit-scrollbar {
106  width: 0;
107}
108
109.new_sp_top *::-webkit-scrollbar-track {
110  background: transparent;
111}
112
113.new_sp_top *::-webkit-scrollbar-thumb {
114  background: transparent;
115  border: none;
116}
117
118.new_sp_top img {
119  max-width: 100%;
120  height: auto;
121}
122
123.new_sp_top ol, .new_sp_top li {
124  list-style: none;
125  margin: 0;
126  padding: 0;
127}
128
129.new_sp_top .carousel {
130  position: relative;
131  padding-top: 75%;
132  -webkit-filter: drop-shadow(0 0 10px #0003);
133          filter: drop-shadow(0 0 10px #0003);
134  -webkit-perspective: 100px;
135          perspective: 100px;
136}
137
138.new_sp_top .carousel__viewport {
139  position: absolute;
140  top: 0;
141  right: 0;
142  bottom: 0;
143  left: 0;
144  display: -webkit-box;
145  display: -ms-flexbox;
146  display: flex;
147  overflow-x: scroll;
148  counter-reset: item;
149  scroll-behavior: smooth;
150  -ms-scroll-snap-type: x mandatory;
151      scroll-snap-type: x mandatory;
152}
153
154.new_sp_top .carousel__slide {
155  position: relative;
156  -webkit-box-flex: 0;
157      -ms-flex: 0 0 100%;
158          flex: 0 0 100%;
159  width: 100%;
160  background-color: #f99;
161  counter-increment: item;
162}
163
164.new_sp_top .carousel__slide:nth-child(even) {
165  background-color: #99f;
166}
167
168.new_sp_top .carousel__slide:before {
169  content: counter(item);
170  position: absolute;
171  top: 50%;
172  left: 50%;
173  -webkit-transform: translate3d(-50%, -40%, 70px);
174          transform: translate3d(-50%, -40%, 70px);
175  color: #fff;
176  font-size: 2em;
177}
178
179.new_sp_top .carousel__snapper {
180  position: absolute;
181  top: 0;
182  left: 0;
183  width: 100%;
184  height: 100%;
185  scroll-snap-align: center;
186}
187
188@media (hover: hover) {
189  .new_sp_top .carousel__snapper {
190    -webkit-animation-name: tonext, snap;
191            animation-name: tonext, snap;
192    -webkit-animation-timing-function: ease;
193            animation-timing-function: ease;
194    -webkit-animation-duration: 4s;
195            animation-duration: 4s;
196    -webkit-animation-iteration-count: infinite;
197            animation-iteration-count: infinite;
198  }
199  .new_sp_top .carousel__slide:last-child .carousel__snapper {
200    -webkit-animation-name: tostart, snap;
201            animation-name: tostart, snap;
202  }
203}
204
205@media (prefers-reduced-motion: reduce) {
206  .new_sp_top .carousel__snapper {
207    -webkit-animation-name: none;
208            animation-name: none;
209  }
210}
211
212.new_sp_top .carousel:hover .carousel__snapper,
213.new_sp_top .carousel:focus-within .carousel__snapper {
214  -webkit-animation-name: none;
215          animation-name: none;
216}
217
218.new_sp_top .carousel__navigation {
219  position: absolute;
220  right: 0;
221  bottom: 0;
222  left: 0;
223  text-align: center;
224}
225
226.new_sp_top .carousel__navigation-list,
227.new_sp_top .carousel__navigation-item {
228  display: inline-block;
229}
230
231.new_sp_top .carousel__navigation-button {
232  display: inline-block;
233  width: 1.5rem;
234  height: 1.5rem;
235  background-color: #333;
236  background-clip: content-box;
237  border: 0.25rem solid transparent;
238  border-radius: 50%;
239  font-size: 0;
240  -webkit-transition: -webkit-transform 0.1s;
241  transition: -webkit-transform 0.1s;
242  transition: transform 0.1s;
243  transition: transform 0.1s, -webkit-transform 0.1s;
244}
245
246.new_sp_top .carousel::before,
247.new_sp_top .carousel::after,
248.new_sp_top .carousel__prev,
249.new_sp_top .carousel__next {
250  position: absolute;
251  top: 0;
252  margin-top: 37.5%;
253  width: 4rem;
254  height: 4rem;
255  -webkit-transform: translateY(-50%);
256          transform: translateY(-50%);
257  border-radius: 50%;
258  font-size: 0;
259  outline: 0;
260}
261
262.new_sp_top .carousel::before,
263.new_sp_top .carousel__prev {
264  left: -1rem;
265}
266
267.new_sp_top .carousel::after,
268.new_sp_top .carousel__next {
269  right: -1rem;
270}
271
272.new_sp_top .carousel::before,
273.new_sp_top .carousel::after {
274  content: '';
275  z-index: 1;
276  background-color: #333;
277  background-size: 1.5rem 1.5rem;
278  background-repeat: no-repeat;
279  background-position: center center;
280  color: #fff;
281  font-size: 2.5rem;
282  line-height: 4rem;
283  text-align: center;
284  pointer-events: none;
285}
286
287.new_sp_top .carousel::before {
288  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
289}
290
291.new_sp_top .carousel::after {
292  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
293}