Web制作のためホバーするとボックスが360度回転するcssアニメーションをつけたが、Safariではきちんと回転しない

コーディングの課題に取り組んでいます。

CSSでアニメーションの設定をしたのですが、Safariのみ表示が崩れます。
（Chrome、edge、firefoxではきちんと表示されます。）

今回設定するCSSアニメーションは、ボックスをホバーするとボックスが回転する、というものです。
Safariのみ表示が崩れることから、Safariのブラウザハックをつけてみたのですが、それでもうまくいきません

私の作ったHTML、CSSは次のとおりです。

HTML
1<section class="philosophy safari-philosophy">
2        <figure class="philosophy-fig"></figure>
3        <h3 class="section-ttl philosophy-ttl">BBBの理念</h3>
4        <p class="philosophy__txt">BBBは英語教育を通じて<span class="auto-br">コミュニケーションの最大化を目指します！</span></p>
5</section>
6<section class="school">
7        <h3 class="section-ttl"><span>スクールの概要</span></h3>
8        <div class="school-inner css-hack">
9            <a class="school-contents safari-school-contents">
10                <h4 class="school-contents__ttl">レッスン内容<span class="school-contents__ttl-en">LESSON</span></h4>
11                <p class="school-contents__txt">さまざまなご要望にお応えした多様なレッスンをご用意しています。</p>
12            </a>
13            <a class="school-contents">
14                <h4 class="school-contents__ttl">料金プラン<span class="school-contents__ttl-en">PRICE</span></h4>
15                <p class="school-contents__txt">業界一の低料金が自慢です。驚きの値段でサービスを提供いたします。</p>
16            </a>
17            <a class="school-contents">
18                <h4 class="school-contents__ttl">講師のご紹介<span class="school-contents__ttl-en">TEACHER</span></h4>
19                <p class="school-contents__txt">BBBの講師は全員ネイティブの外国人です。本格的な英語が学べます。</p>
20            </a>
21            <a class="school-contents">
22                <h4 class="school-contents__ttl">BBBのQ&A<span class="school-contents__ttl-en">Q&A</span></h4>
23                <p class="school-contents__txt">お問い合わせの多い質問をまとめました。気になることがある方はご覧ください。</p>
24            </a>
25        </div>
26    </section>

Sass
1.philosophy {
2    position: sticky;
3    top: 0;
4    z-index: -1;
5    height: 100vh;
6    display: grid;
7    grid-template-rows: auto;
8    grid-template-columns: auto;
9    color: white;
10
11    &>* {
12        grid-row: 1;
13        grid-column: 1;
14    }
15
16    &-fig {
17        background-image: url(../img/philosophy.jpg);
18        background-size: cover;
19        background-position: 50% 10%;
20        filter: brightness(50%);
21        z-index: -1;
22    }
23
24    &-ttl {
25        margin-top: 80px;
26    }
27
28    &__txt {
29        margin: 0 16px;
30        align-self: center;
31        text-align: center;
32        font-size: 46px;
33        font-weight: bold;
34    }
35}
36
37/* safari用 */
38@media screen and (-webkit-min-device-pixel-ratio: 0) {
39
40    _::-webkit-full-page-media,
41    _:future,
42    :root .safari-philosophy {
43        position: sticky;
44        top: 0;
45    }
46}
47
48.school {
49    background-color: green;
50    padding-top: 60px;
51    padding-bottom: 60px;
52
53    &-inner {
54        max-width: 860px;
55        margin: 60px auto 0;
56        display: grid;
57        gap: 32px;
58
59        @media (min-width:900px) {
60            grid-template-rows: auto auto;
61            grid-template-columns: 1fr 1fr;
62            gap: 32px 60px;
63            margin: 100px auto 0;
64        }
65
66    }
67
68    &-contents {
69        background-color: white;
70        border-radius: 20px;
71        padding: 30px;
72        text-align: center;
73
74        &__ttl-en {
75            display: block;
76            margin-top: 15px;
77            margin-bottom: 40px;
78        }
79
80        &__txt {
81            margin: 0 auto;
82            text-align-last: left;
83            letter-spacing: 0.1em;
84        }
85    }
86}
87
88// ボックスの回転
89.school-contents:hover {
90    animation-name: rotateYAnime;
91    animation-duration: 1s;
92    animation-fill-mode: forwards;
93}
94
95@keyframes rotateYAnime {
96    from {
97        transform: rotateY(0);
98    }
99
100    to {
101        transform: rotateY(-360deg);
102    }
103}

どうやら.philosophyにつけたposition: sticky;と@keyframesの愛称が良くないようです。

そこでボックスの回転にも

Sass
1@media screen and (-webkit-min-device-pixel-ratio: 0) {
2
3    _::-webkit-full-page-media,
4    _:future,
5    :root .safari-school-contents {
6        animation-name: rotateYAnime;
7        animation-duration: 1s;
8        animation-fill-mode: forwards;
9    }
10
11    @keyframes rotateYAnime {
12        from {
13            transform: rotateY(0);
14        }
15
16        to {
17            transform: rotateY(-360deg);
18        }
19    }
20}