Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate the seamless animations I admire in examples online. Additionally, I struggled with creating a smooth RGB gradient transition. (Although I initially wanted to stick to pure CSS for animations, I am now open to using JavaScript if it can help me achieve the desired effect.) If anyone has insights or solutions, please share them with 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>