@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-ти ядерный я этого не ощущаю, а вот если взглянуть на диспечер задач то там все очень плохо
345053c67768443ab098da5890c07ac0.JPG

Как мне оптимизировать анимацию на сайте, буду благодарен за любую помощь.
  • Вопрос задан
  • 479 просмотров
Пригласить эксперта
Ответы на вопрос 3
pm_wanderer
@pm_wanderer
junior-HTML
Попробуй вот так внутри кейфреймс:
0% {transform: translateZ(0) translateY(0);}
50% {transform: translateZ(0) translateY(-5px);}
100% {transform: translateZ(0) translateY(0);}
Ответ написан
Комментировать
@zhainar
Гуглю за вас
Почему тупо гифками не сделать
Ответ написан
Комментировать
@vvvadimos
про will-change еще почитайте
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы