Safariで一部のcssがを作動しない

前提

html/css、jqueryを使い、練習として架空サイトを作りましたが、cssの一部がSafari（MacとiPhone）のブラウザだけうまく作動せず、困っています。

サイトは下記の2つになります。
①
https://komugi-pan.y-miki-portfolio.com/
②
https://pan-de-molde.y-miki-portfolio.com/

実現したいこと

①のサイト
バーガーメニューをクリックしたら右からスライドしてメニューが現れる
（jqueryでheaderにopenクラスを付けて、.menu-listをright:-100%;から0%にしてスライド表示）
−−−−−−−−−−−−−−−−−−
②のサイト
scrollしたら、各h2のサイドの飾りをanimationを使い出現させる
（jqueryでスクロール時に.h2-commonに.h2-animeというクラスを追加し、.pink-dotと.green-dotをanimationでopacity0→1、rotateY0→-180degにする）

発生している問題・エラーメッセージ

①menu-listだけが表示されない（jqueryでクリック時にheaderへのopenというクラス付与はできている）
−−−−−−−−−−−−−−−−−−−−
②.pink-dotと.green.dot2が出現しない

※他のブラウザでは問題なく見れています。safariで表示されない原因はなんでしょうか？

エラーメッセージ

エラーは出てない？ような気がします。　

該当のソースコード