How to remove a sharp start?

Question

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>

score 0 · Accepted Answer · answered Jul 22 '23 at 10:35

0

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>

answered Jul 22 '23 at 10:35

Alexander Nenashev

8,775
2
6
17

When I read your answer, I froze... As it turns out, it's simple... THANK YOU SO MUCH! – Timur Jul 22 '23 at 10:39
And if I place the gradient at an angle, I just need to calculate the position of the animation to make it move correctly, right? [background: linear-gradient(-50 deg, red,orange,#ff0,green,#00f,indigo,#d85fd8,red);] PS (Ticked that I accepted your answer, I hope you were awarded points) – Timur Jul 22 '23 at 11:01
@Timur try to animate the x position too – Alexander Nenashev Jul 22 '23 at 11:03

How to remove a sharp start?

1 Answers1