Webサイト制作でtransitionを使ったCSSアニメーションを作っているが、Chrome、Firefox、Edgeではきちんと動いてくれるのに、Safariでは意図したとおりに動いてくれない。

Webサイトを作っています。
transitionを使ったCSSアニメーションを作っているのですが、ブラウザで確認するとChrome、Firefox、Edgeでは意図した通りの動きをしてくれるのですが、Safariでは意図したとおりに動いてくれません。
私の作ったHTML、CSSは次のとおりです。

HTML
1<section class="reason">
2    <div class="reason-inner">
3        <div class="reason-merit">
4            <div class="reason-merit-desc">
5                <h4 class="reason-merit-desc__ttl">仮タイトル1</h4>
6            </div>
7        </div>
8        <div class="reason-merit">
9            <div class="reason-merit-desc">
10                <h4 class="reason-merit-desc__ttl">仮タイトル2</h4>
11            </div>
12        </div>
13    </div>
14</section>

CSS
1.reason-inner {
2    background-color: green;
3}
4
5.reason-merit {
6    background-color: skyblue;
7    padding-top: 70px;
8    padding-bottom: 70px;
9    transition: 0.3s;
10}
11
12.reason-merit:nth-child(odd) {
13    margin-right: 50%;
14}
15
16.reason-merit:nth-child(odd):hover {
17    margin-right: 16px;
18}
19
20.reason-merit:nth-child(even) {
21    margin-left: 50%;
22}
23
24.reason-merit:nth-child(even):hover {
25    margin-left: 16px;
26}

reason-meritの部分をホバーするとこの部分が横に伸びるようにしているのですが、この部分にtransitionを設定しているため、本来はアニメーションで伸びるはずです。

ところがSafariの場合は伸びることは伸びるのですが、アニメーションが効かずカクカクとした動きになってしまいます。
どのように修正すればいいのでしょうか？

念のため、MacOSとSafariのバージョンを書くと、MacOSが12.2、Safariが15.3です。

修正方法の分かる方のご教授をお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Safari は（50% から 16px などの）異なる単位の値間の transition アニメーションをサポートしていないようです。また、単位なしの 0 と 0% も区別されているようです（0 から 50% へのアニメーションができませんが 0% から 50% なら可能です）。

以下は width, max-width を使った書き換えの例です。