Как снизить нагрузку CSS анимации?

Question

[Сергей Шилов]

Добрый день. Использую код, приведенный ниже, в качестве элемента дизайна и вижу, что он сильно грузит процессор. Графики приводить не стану, но чтоб вы понимали, процессор с анимацией загружен на 90-95%, без нее 30-35%. Какие средства посоветуете использовать, чтобы минимизировать нагрузки анимации?

.portfolio_present-mobileGradient {
    width: calc(100% - 24vw);
    height: 30vw;
    position: absolute;
    top: 10vw;
    left: 12vw;
    background: transparent;
    z-index: 1;
    border-radius: 100%;
    -webkit-filter: blur(20px);
    	animation: shadow 6.5s ease-in-out infinite;
   -webkit-animation: shadow 6.5s ease-in-out infinite;
}

@-webkit-keyframes shadow {
    0% {
        box-shadow: 0px 0px 100px 25px #3295F2;
        background: rgba(50, 149, 242, 0.85);
    }
	50% {
        box-shadow: 0px 0px 230px 54px #40267D;
        background: rgba(64, 38, 125, 0.84);
    }
	100% {
        box-shadow: 0px 0px 100px 25px #3295F2;
        background: rgba(50, 149, 242, 0.85);
    }
}

Answer 1

[tennalian]

А браузер у вас какой? Сдается мне дело в box-shadow, а не в анимации

Comments

[Сергей Шилов]

хром

[tennalian]

Сергей Шилов: тогда почитайте и проверьте habrahabr.ru/post/243909

[Сергей Шилов]

tennalian: вообще, я читал эту статью, но забыл про нее. Попробовал уменьшить значение до меньше 200, до 100 где-то, не помогло. Придется, наверное, избавляться от box-shadow или ждать фикса от разработчиков

[IvanIvanych77]

сегодня тоже задался таким вопросом и да, точно, все дело именно в нем, в box-shadow, но блин, как мне теперь быть))))

Answer 2

[Николай Шабалин]

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

Answer 3

[Oleg Vavilov]

Отрисовка теней очень сильно хавает ресурсы системы. Советовал бы избавиться от анимирования теней.