Как сделать анимацию CSS и SVG (SMIL) плавной при загрузке страницы - PullRequest
Новая
       34

Как сделать анимацию CSS и SVG (SMIL) плавной при загрузке страницы

0 голосов
/ 06 мая 2019

У меня есть объект SVG (SMIL) на html-странице с анимацией в цикле. Проблема в том, что когда страница загружает изображения при медленном интернет-соединении, анимация работает с прерываниями. И то же самое касается 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;
}
...