Does animation make page so much slower?

Issue

I have here any animation on my page: https://tikex-dev.com

active class turn on this:

animation: btn-text-anima 1s linear infinite

If I turn it off, page laggin almost dismiss. Why is this animation so performace intensive?

.btn-text:not(.btn-video).active:after {
    animation: btn-text-anima 1s linear infinite;
}

@keyframes btn-text-anima {
    0% {
        right: -30px;
        opacity: 0;
    }

    60% {
        right: -40px;
        opacity: 1;
    }

    100% {
        right: -45px;
        opacity: 0;
    }
}

Solution

Chaning the right attribute in your animation is probably the root cause of the problem. This is because the right attribute defines the position of the element, on which other positions depend, resulting in a complete redraw.

So you should use transform, which will run after the rendering in a post-processing step.

So using something like transform: translateX(-30px); instead of right: -30px should help you. How this will exactly behave will however depend on other contetn of your page, but this should give you a general idea.

Answered By - Lux