The animation in Yandex browser is loading very slowly, how to fix it?

Question

css

https://aerosolparts.ru/

There is such a site, on the first screen, the bar at the bottom of the slider increases very slowly, the problem most likely lies in the fact that the site is loading slowly.

Animation is done through class additions, (on jQuery).
Is it possible to overestimate the priority of this animation, or run it in a separate thread.
It is necessary that the lines expand smoothly.

Answer 1

Change your computer to a more powerful one.

Answer 2

Animation jerks are observed in both Firefox and Chrome.
Lighthouse says:

Uncombined animations can skip frames and increase the overall layout offset.

And this article says:

Animation that runs outside of the compositing stage may look "jagged" (i.e., not smooth) on slow phones or during resource-intensive tasks on the main thread. Jerky animations can increase your page's Cumulative Layout Shift (CLS) score. Lowering the CLS helps improve the performance score in Lighthouse.

If translated into human, then - redo the animation styles so that it does not use properties that cause redrawing, i.e. no width.
PS. If you go further, following the links, you can get a more detailed answer.

sketched out the code

.home-slider__carousel.animate {
  display: block;
  padding-bottom: 82px;
  position: relative;
}

.animate__body {
  width: calc(100% - 1px);
  display: flex;
  align-items: start;
  transform: skew(-35deg);
  position: relative;
  height: 26px;
  overflow: hidden;

}

.animate__body::before,
.animate__body::after {
  content: '';
  height: 100%;
  width: 50%;
  flex: 1 1;
  position: absolute;
  top: 0;
  left: 0;
}

.animate__body::before {
  background: #0d0087;
  animation: anima1 3s linear forwards infinite;
  z-index: 1;
}

.animate__body::after {
  background: #e34126;
  height: 65.39%;
  animation: anima2 3s linear forwards infinite;
}

@keyframes anima1 {
  0% {
    transform: translateX(-100%);
  }

  33.33% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes anima2 {
  0% {
    transform: translateX(-100%);
  }

  33.33% {
    transform: translateX(0);
  }

  66.66% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}