Question

我尝试使用@keyframes为渐变背景设置动画，但无论出于何种原因，动画都不会发生。我有所有供应商前缀，我拼写正确的动画名称。我为此使用了一个生成器：https://www.gradient-animator.com/它在哪里工作。

见下面的例子：

＆＃13;

@-webkit-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes warpedBackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 100% 100%;
  
  -webkit-animation: warpedBackground 1s ease infinite;
  -moz-animation: warpedBackground 1s ease infinite;
  animation: warpedBackground 1s ease infinite;
}

＆＃13;

<div id="gradientsquare"></div>

＆＃13;

代码几乎相同，所以我不确定为什么我的工作没有...

Answer 1

通过指定backgrouns-size:100% 100%，您使渐变的大小与div相同;因此background-position的所有值都是等价的，所以你不会看到任何动作。更改background-size，渐变将移动。

使它大于div

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 500% 100%;

  animation: warpedBackground 1s ease infinite;
}

<div id="gradientsquare"></div>

使它小于div：

@keyframes warpedBackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#gradientsquare {
  border:1px solid;
  width: 300px;
  height: 300px;
  background: linear-gradient(170deg, #003a5d, #94c7e6);
  background-size: 50% 100%;
  background-repeat:no-repeat;
  
  animation: warpedBackground 1s ease infinite;
}

<div id="gradientsquare"></div>

CSS背景渐变过渡不起作用

1 个答案: