Animating Linear Gradient

Question

I need some help smoothing my animation, I've tried doing it according to a similar question here, on StackOverflow, but it doesn't seem to work. It just roughly changes the gradients. The goal is to animate it like the 'smart animate' function in Figma (here's what I'm trying to do (attention to the background): the design file https://www.figma.com/file/kfCgTxmdOIgZt4S91KE1rE/RandNameGenerator-prototype?node-id=1%3A8 and the prototype https://www.figma.com/proto/kfCgTxmdOIgZt4S91KE1rE/RandNameGenerator-prototype?page-id=0%3A1&node-id=1%3A36&viewport=1039%2C328%2C0.28&scaling=min-zoom&starting-point-node-id=1%3A36&show-proto-sidebar=1 )

#gradient {
    width: 1440px;
    height: 1024px;
    background: linear-gradient(130.77deg, #950000 25.04%, #D64000 84.38%);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-animation: bgChange 10s ease infinite;
    -moz-animation: bgChange 10s ease infinite;
    animation: bgChange 10s ease infinite;
}

@-webkit-keyframes bgChange {
    0% {
        background: linear-gradient(183.8deg, #83002F 32.71%, #F60000 136.7%);
    }
    20% {
        background: linear-gradient(262.57deg, #64114D 13.14%, #F60059 124.77%);
    }
    40% {
        background: linear-gradient(297.68deg, #002459 7.35%, #AB00D6 102.37%);
    }
    60% {
        background: linear-gradient(1.41deg, #00D085 -12.95%, #00109D 123.44%);
    }
    80% {
        background: linear-gradient(55.26deg, #EFC900 12.66%, #00FFC2 125.91%);
    }
    100% {
        background: linear-gradient(87.47deg, #BD3900 20.56%, #FFA800 111.39%);
    }
}

@-moz-keyframes bgChange {
    0% {
        background: linear-gradient(183.8deg, #83002F 32.71%, #F60000 136.7%);
    }
    20% {
        background: linear-gradient(262.57deg, #64114D 13.14%, #F60059 124.77%);
    }
    40% {
        background: linear-gradient(297.68deg, #002459 7.35%, #AB00D6 102.37%);
    }
    60% {
        background: linear-gradient(1.41deg, #00D085 -12.95%, #00109D 123.44%);
    }
    80% {
        background: linear-gradient(55.26deg, #EFC900 12.66%, #00FFC2 125.91%);
    }
    100% {
        background: linear-gradient(87.47deg, #BD3900 20.56%, #FFA800 111.39%);
    }
}

@keyframes bgChange {
    0% {
        background: linear-gradient(183.8deg, #83002F 32.71%, #F60000 136.7%);
    }
    20% {
        background: linear-gradient(262.57deg, #64114D 13.14%, #F60059 124.77%);
    }
    40% {
        background: linear-gradient(297.68deg, #002459 7.35%, #AB00D6 102.37%);
    }
    60% {
        background: linear-gradient(1.41deg, #00D085 -12.95%, #00109D 123.44%);
    }
    80% {
        background: linear-gradient(55.26deg, #EFC900 12.66%, #00FFC2 125.91%);
    }
    100% {
        background: linear-gradient(87.47deg, #BD3900 20.56%, #FFA800 111.39%);
    }
}

<!DOCTYPE html>
<html lang="en">
<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">
     <link rel="stylesheet" href="style.css">
     <title>Gradient</title>
</head>
<body>
    <div id="gradient"></div>
</body>
</html>

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, May 31 '22 at 10:41

Jonu · Accepted Answer · 2022-05-31T11:00:17.977

You can't change linear background colors smoothly. You have to add all colors in same linear gradient and animate it with background position. Here is a example:

body {
    background: linear-gradient(270deg, #2ee8b8, #e8ab2e, #ad2ee8, #2ee87f);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

And if you want to rotate your gradient or change position, there is multiple ways, here is one example with pseudo and rotating:

.element {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}
.element div {

  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  -moz-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  height:100px;
  width:100px;

}
.element:before {
    content:'';
    height:300%;
    width:300%;
    transform-origin:50% 50%;
    position:absolute;
    transform:translate(-50%,-50%) rotate(0);
    background: linear-gradient(270deg, #2ee8b8, #e8ab2e, #ad2ee8, #2ee87f);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}


@keyframes AnimationName {
    0%{
      background-position:0% 50%;
      transform:translate(-50%,-50%) rotate(0);
    }
    50%{
      background-position:100% 50%;
      transform:translate(-50%,-50%) rotate(360deg);
    }
    100%{
      background-position:0% 50%;
      transform:translate(-50%,-50%) rotate(0);
    }
}

}

<div class="element">
      <div></div>
    </div>

Animating Linear Gradient

1 Answers1