如何在页面加载时平滑CSS和SVG（SMIL）动画

Question

我在html页面上有SVG（SMIL）对象，动画在循环中。问题是，当页面通过缓慢的Internet连接加载图像时，动画会中断。悬停时的CSS动画和过渡也是如此。

有人可以建议如何使其平滑吗？

SVG对象和CSS转换示例：

<div>
    <object type="image/svg+xml" data="./timelineSVG.svg"></object>
</div>

Contents of "timelineSVG.svg" (simple circle movement):
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">

    <circle cx="25" cy="30" r="5" fill="#ccff66" stroke="#ccff66" stroke-width="0">
    <animateMotion id="g1" path="M -15 0 L -15 -15 L 0 -15" fill="freeze" begin="0s;g12.end+1s" dur="9s"/>
    ...
    </circle>

</svg>


.timelineItem {
    color: #000000;
    ...
    transition: all 0.3s ease 0s;
}

.timelineItem:hover {
    color: #444444;
}