Как избежать замедления в течение длительного периода времени в бесконечной анимации CSS? ⇐ CSS

[Anonymous]

У меня есть этот CSS-код ниже, который запускает анимацию на пути графика D3. Код ниже

Код: Выделить всё

.link {
stroke-dasharray: 4;
stroke-dashoffset: 40;
animation: dash 20s linear infinite;
}

@keyframes dash {
from {
stroke-dashoffset: 360;
}
to {
stroke-dashoffset: 40;
}
}

Вот ссылка на анимацию https://imgur.com/7D2aaYT
Примечание. У меня есть целый граф с несколькими путями запуска анимации. как указано выше.
Как видно из CSS и видео, анимация по своей природе непрерывна. Проблема в том, что если оставить ее на очень долгое время, скажем, на несколько часов или на день, анимация замедляется, и вкладка перестает отвечать на запросы. При обновлении страницы все возвращается в норму. Я также заметил, что Chrome также предупреждает о высоком использовании памяти.
Поэтому я поискал в Интернете решение, которое должно в некоторой степени облегчить проблему. Вот что я попробовал< /p>

Код: Выделить всё

.link {
stroke-dasharray: 4;
stroke-dashoffset: 40;
animation: dash 20s linear infinite;
/* the transform and will-change properties */
/* are here to only enable GPU */
transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
will-change: transform;
}

Как видите, я добавил еще три строки

Код: Выделить всё

transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
will-change: transform;

Но какого-либо заметного улучшения в этом решении я не обнаружил. Анимация замедляется через несколько часов.
Что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/786 ... ons-of-css