动画线性渐变

Question

我需要一些帮助来平滑我的动画，我已经尝试根据 Whosebug 上的类似问题进行此操作，但它似乎不起作用。它只是粗略地改变梯度。目标是像 Figma 中的 'smart animate' 函数一样对其进行动画处理（这是我正在尝试做的（注意背景））：设计文件 https://www.figma.com/file/kfCgTxmdOIgZt4S91KE1rE/RandNameGenerator-prototype?node-id=1%3A8 和原型 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>

Answer 1

您无法平滑地更改线性背景颜色。您必须将所有颜色添加到相同的线性渐变中，并使用背景位置对其进行动画处理。这是一个例子：

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%}
}
}

如果你想旋转你的渐变或改变位置，有多种方法，这里是一个伪和旋转的例子：

.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

html

css

animation

figma