Улучшите производительность с помощью паузы в анимации бесконечного градиента ⇐ CSS

[Гость]

Из соображений производительности я хотел бы добавить паузу в анимацию бесконечного градиента, созданную с помощью https://www.gradient-animator.com/, чтобы дать веб-браузерам возможность отдохнуть от рендеринга переходов между разными цветами.

Вот пример скрипта, созданного с использованием вышеупомянутого веб-сайта.

.css-селектор { фон: линейный градиент (270 градусов, #3adab1, #3a7bda, #853ada); размер фона: 600% 600%; -webkit-animation: AnimationName 30 секунд легкость бесконечна; -moz-animation: AnimationName 30 секунд легкость бесконечна; анимация: AnimationName 30 с. Легкость бесконечна; } @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } Есть ли у кого-нибудь предложения по достижению этого путем изменения CSS? Любая помощь будет принята с благодарностью!

На этом сайте говорится, что этого можно достичь, переключаясь между состояниями «приостановлено» и «работает», хотя я не уверен, как именно это реализовать. Я искал в Google и Stackoverflow, и это привело меня к созданию этого.