How to remove a sharp start?

July 22, 2023

I just got acquainted with animation in CSS. And I ran into the problem that it is not possible to do smoothly so that the animation goes in cycles and is not interrupted.
I tried a lot of different options and through crutches. There were even successful solutions.
But seeing examples of smooth animations that are looped and without any jumps, I can’t figure out how to do it. At the same time, the RGB gradient did not find a smooth transition. ((Why didn’t I consider JS, because I liked smooth animations on pure CSS3, I wanted to try it on it, but I’m already ready to use JS, the main thing is to see how it’s done) (I hope everything is clear in the description, otherwise I used a translator)

If anyone knows, please tell me

div {
    display: block;
    background: linear-gradient(#FF3155, #FF3155, #FFAF42, #FFAF42, #FFED5E, #FFED5E, #FF3155);
    background-size: cover;
    width: 500px;
    height: 500px;
    animation: gradient 5s infinite linear; 
}
@keyframes gradient {
     to {
         background-position: 0 100vh;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        
    </div>
</body>
</html>

>Solution :

Your final background position should match the height of the DIV:

div {
    display: block;
    background: linear-gradient(#FF3155, #FF3155, #FFAF42, #FFAF42, #FFED5E, #FFED5E, #FF3155);
    background-size: cover;
    width: 500px;
    height: 500px;
    animation: gradient 5s infinite linear; 
}
@keyframes gradient {
    to {
         background-position: 0 500px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        
    </div>
</body>
</html>