我需要一些帮助平滑我的动画，我试过根据类似的问题在这里做，在StackOverflow上，但它似乎不起作用。它只是粗略地改变了梯度。我们的目标是让它像Figma中的"智能动画"功能一样动画化(这是我正在尝试做的(注意背景):设计文件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>你不能平滑地改变线性背景颜色。你必须在相同的线性渐变中添加所有颜色，并将其与背景位置一起动画。下面是一个例子:
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%}
}
}如果你想旋转渐变或改变位置，有多种方法，这里有一个使用pseudo和旋转的例子:
.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>