svg动画 animateTransform叠加问题，如何顺序连续播放后循环？

三个animateTransform顺序播放后，停留在最后一个循环，请问如何才能让三个动画顺序播放后，在从第一个接着播放。

<svg viewBox="0.0 0.0 385 385" fill="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg">
    <g>        
        <path fill="#444444" d="M286.975 95.449a135.43 135.43 0 0 1 .316 191.842l-95.764-95.764z"/>
        <animateTransform attributeName="transform" id="p31" begin="0s" dur="0.5s" type="rotate" from="180 192.5 192.5" to="225 192.5 192.5" repeatCount="indefinite" />
        <animateTransform attributeName="transform" id="p32" begin="0.5s" dur="1.5s" type="rotate" from="225 192.5 192.5" to="315 192.5 192.5" repeatCount="indefinite" />
        <animateTransform attributeName="transform" id="p33" begin="2s" dur="1s" type="rotate" from="315 192.5 192.5" to="360 192.5 192.5" repeatCount="indefinite" />
    </g>
</svg>

---

根据chrome develop tools提示，这种动画方式是过时的方式，将来不在被支持，我用css3的方式解决了这个问题。