Помощь с css анимацией

Question

пожалуйста, обьясните, почему моя анимация дергается? по сути то она должна плавно меняться. 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%);
    }
}

Answer 1

Анимировать градиенты быстро не получится с помощью css, слишком ресурсоемко. Тут либо вот так backgroud-image двигать с помощью background-position, либо использовать canvas. Я больше способов не знаю, может кто- то еще подскажет.

Я так понял, вам что-то типа такого надо:

@keyframes anim { 
  0% { background-position: 0% 0%; background-size: 200% 200%; }
  20% { background-position: 75% 75%; background-size: 100% 420%; }
  40% { background-position: 75% -75%; background-size: 200% 180%; }
  60% { background-position: -75% 75%; background-size: 200% 400%; }
  80% { background-position: 0% 75%; background-size: 100% 200%; }
  100% { background-position: 0% 0%; background-size: 200% 200%; }
}
html {
  background: #161C2E;
}
body {
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 50% at 50% 50%, #252E42 0%, #161C2E 100%) no-repeat;
    background-size: 200% 200%;
    animation: anim 5s infinite;
    animation-timing-function: cubic-bezier(0.4, 0, 0, 0.93); ; 
    height: 100vh; 
}

<html>
  <body></body>
</html>

Сделал побыстрее анимацию, чтобы видно было.

БЛОГ НА HUSL

Помощь с css анимацией

Ответы (1 шт):