Как оптимизировать анимацию на сайте?

Question

[westdp]

Доброе время суток, нужен совет, подскажите на сайте используется исключительно анимация CSS3
сайт тут

@-moz-keyframes animation-coub {
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
@-webkit-keyframes animation-coub {
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes animation-coub {
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
.brif-transform {
    will-change: animation;
    -webkit-animation: animation-coub 1.2s linear infinite;
    -moz-animation: animation-coub 1.2s linear infinite;
    -o-animation: animation-coub 1.2s linear infinite;
    -ms-animation: animation-coub 1.2s linear infinite;
    animation: animation-coub 1.2s linear infinite;
    position: absolute;
    width: 11%;
    top: 35%;
    left: 43%;
    z-index: 4;
}

Для очень большого количества блоков на странице их больше 15 точно, у меня процесор 6-ти ядерный я этого не ощущаю, а вот если взглянуть на диспечер задач то там все очень плохо


Как мне оптимизировать анимацию на сайте, буду благодарен за любую помощь.

Comments

[copal]

Если тупит css анимация, то либо Вы не chrome, либо нужно переводить все в растр. Это касается и того случая, когда и в хроме тупит.

[westdp]

copal: так тут вектора вообще нету, это хром, это я переборщил с css анимацией?

[copal]

westdp: не могу судить так-как не знаю сколько у Вас анимаций, но как вариант ещё утечку js рассмотрите.

[westdp]

copal: тут JS вообще нету, все что есть на экране это движении это CSS3)

Answer 1

[Алексей Струков]

Попробуй вот так внутри кейфреймс:
0% {transform: translateZ(0) translateY(0);}
50% {transform: translateZ(0) translateY(-5px);}
100% {transform: translateZ(0) translateY(0);}

Answer 2

[Zhainar]

Почему тупо гифками не сделать

Answer 3

[vvvadimos]

про will-change еще почитайте