Please see this codepen: https://codepen.io/ilovecomputers/pen/Nydowg
1. The top two bars are SVG while the bottom two are DIVs.
2. Click the animate button and wait for the animation to finish.
a. Note the animation is synced between the two types
3. Click the animate button again.
a. Note the animation is no longer synced as the transform of the white wipe bar is not reset
I've tried this in Safari 11.0.3 (13604.5.6), Tech Preview Release 51 (Safari 11.2, WebKit 13606.1.6), and the Nightly. Same behavior. The current Chrome and Firefox do not exhibit this behavior.
Here is a workaround: https://codepen.io/ilovecomputers/pen/YaajWJ
Note the `resetSVGTransforms` function. It toggles a non-visual transform in two frames.