Google PageSpeed ​​Insights calculates css animation time during rendering, how to fix it?

Question

css

I tested the site in Google SpeedPage Insight, got a poor result on the desktop version, began to dig into what could be the problem, it turned out that Google counts the animation time during page rendering. Here is the css animation.

.header {
    background: url(../img/main/_0020_p-min.jpg) center bottom no-repeat;
    background-size: auto 100%;
    animation: animatedHeader 45s linear infinite;
    -webkit-animation: animatedHeader 45s linear infinite
}
@-webkit-keyframes animatedHeader {
    0%,
    100% {
        background-position: 0 0, 0 0, 100% 0
    }
    50% {
        background-position: -946px 0, 0 0, 100% 0
    }
}
@keyframes animatedHeader  {
    0%,
    100% {
        background-position: 0 0, 0 0, 100% 0
    }
    50% {
        background-position: -946px 0, 0 0, 100% 0
    }
}

How can I fix it? Drops from tasty 99 points to 52 because of one animation(

Answer 1

Of course, I'm not an expert, but you can do it through js so that the animation starts loading only when you scroll to a certain height.