こんにちは。つんあーです。お久しぶりです。
SVGでちょっとしたアニメーションを書いたときに、Safariでだけ予想と違う挙動をして詰まったという話です。
まず下記のpenですが、Chromeだと動くもののSafariだと動きません。
（Mac、iOS共に動きませんでした。）
transform: translateX(...)で始点を変えた3つの点を、
共通の@keyframeでアニメーションさせています。
変化後（=keyframeが100%の地点）の状態は同じにしたいのですが、
始点がそれぞれの点ごとで違うので、keyframeには100%しか記入しませんでした。
See the Pen Untitled by ats05 (@ats05) on CodePen.
結果
Chrome
Safari
Safariの場合、微動だにしませんね。
修正
こちらはSafariでも動作します。
結論としては、空でいいので0%のフレームを定義することで修正できました。
See the Pen Untitled by ats05 (@ats05) on CodePen.
今回はアッサリしていますが、以上です。おしまい！