Текст мерцает при анимации с помощью JS + CSS ⇐ Html

[Anonymous]

Я унаследовал этот фрагмент кода для элемента-героя, который должен быть анимирован, но работает неправильно (актуален только dsektop). Я постараюсь описать это как можно лучше:
Как это должно выглядеть

• элемент с #centerpiece представляет собой круг с анимированной рамкой; граница рисуется от 0 до 100 в ANIMATION_DURATION,
• есть строки описаний, каждая из которых имеет формат .description-item-desktop. Их всегда 4, и они располагаются в каждом углу (правом нижнем, левом нижнем, левом верхнем, правом верхнем) относительно #centerpiece. Предполагается, что эти элементы плавают по кривой, следуя за движением часов (и анимированной рамкой, упомянутой ранее),
• также есть «стрелка» svg — точнее, 4 стрелки, каждая из которых направлена ​​от центра к углу. Они должны оставаться «установленными» в центре и вращать кончик в соответствии с соответствующим элементом описания.

Проблемы, с которыми я столкнулся
В настоящее время у .description-item-desktop есть проблема: при анимации текст мерцает. Похоже, что он рендерится с каждым кадром, но я не уверен. Это самая насущная проблема, с которой я столкнулся сейчас, и мне нужно ее исправить как можно скорее, но есть и другие - стрелки svg также анимированы правильно, и я действительно не знаю, как добиться желаемого эффекта (подсказка после элемента описания).
Что я пробовал
Я попробовал добавить это в .description-item-desktop, потому что видел, как кто-то упомянул, что это может помочь с мерцающим текстом, но это ничего не изменило.

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

.description-item-desktop {
transition: opacity 1s ease-in-out;
will-change: opacity;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

.description-item-desktop.floating-animation {
animation-duration: 7000ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
}

Я также пытался (несколько раз) переработать контроллеры анимации и всю логику, лежащую в их основе, но, честно говоря, не знаю, как это сделать, и для полноценной работы всегда чего-то не хватало (но мерцающий текст всегда присутствовал).
Соответствующие фрагменты кода
PHP

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

data-bg-images='' style="">









[img]
[img]

Подробнее здесь: [url]https://stackoverflow.com/questions/79805577/text-flickering-while-animated-with-js-css[/url]