пожалуйста, обьясните, почему моя анимация дергается? по сути то она должна плавно меняться. radial-gradient в свойстве background должен равномерно перемещаться по странице, у меня же он перемещается по странице рывками, т.е. нет плавности. я не понимаю почему.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
body {
background: radial-gradient(50% 50% at 50% 50%, #a2b0cf 0%, #161C2E 100%);
animation: anim 5.0s infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.4, 0, 0, 0.93);
animation-play-state: running;
animation-delay: 2.0s;
height: 100vh; }
@keyframes anim {
0% {
background: radial-gradient(50% 50% at 50% 50%, #a2b0cf 0%, #161C2E 100%);
}
20% {
background: radial-gradient(50% 50% at 70% 70%, #a2b0cf 0%, #161C2E 100%);
}
40% {
background: radial-gradient(50% 50% at 40% 30%, #a2b0cf 0%, #161C2E 100%);
}
60% {
background: radial-gradient(50% 50% at 42% 55%, #a2b0cf 0%, #161C2E 100%);
}
80% {
background: radial-gradient(50% 50% at 42% 55%, #a2b0cf 0%, #161C2E 100%);
}
}