通过@keyframe实现转换

Question

我正在尝试使用@keyframe动画实现转换，该动画会更改背景渐变但似乎无法将手指放在我出错的位置。

现在，背景只是从渐变跳到梯度而没有过渡。

链接到jsfiddle

CSS：

.box {
  position:fixed;
  width:100%;
  height:800px;
  background: #071435;
  background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
  background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
  background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
  background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
  background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
  background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
  background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
  background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
  opacity:1;
}

.box:hover {
  -webkit-animation: playbg 3s infinite;
  -webkit-transition: all 3s linear;
}

@-webkit-keyframes playbg {
  0% {
    background-image: -o-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
    background-image: -moz-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
    background-image: -ms-linear-gradient(-44deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
    background-image: linear-gradient(-134deg, rgba(255, 22, 150, 0.64) 0%, rgba(178, 136, 12, 0.85) 100%);
    background-image: -o-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
    background-image: -moz-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
    background-image: -ms-linear-gradient(-134deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
    background-image: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 52%, rgba(0, 0, 0, 0.47) 100%);
    opacity:1;
  }
  20% {
    background-image: -o-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
    background-image: -moz-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
    background-image: -ms-linear-gradient(-90deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
    background-image: linear-gradient(-180deg, rgba(4, 91, 255, 0.64) 11%, #00FDF2 100%);
    background-image: -o-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
    background-image: -moz-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
    background-image: -ms-linear-gradient(-114deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
    background-image: linear-gradient(-204deg, #FF1111 29%, rgba(255, 62, 30, 0.50) 97%);
    background-image: -o-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
    background-image: -moz-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
    background-image: -ms-linear-gradient(-71deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
    background-image: linear-gradient(-161deg, rgba(130, 254, 152, 0.50) 31%, rgba(68, 93, 204, 0.50) 92%);
    opacity:1;
  }
  50% {
    background-image: -o-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
    background-image: -moz-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
    background-image: -ms-linear-gradient(-116deg, #F40FD1 0%, #5AD74C 95%);
    background-image: linear-gradient(-206deg, #F40FD1 0%, #5AD74C 95%);
    background-image: -o-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
    background-image: -moz-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
    background-image: -ms-radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
    background-image: radial-gradient(50% 69%, rgba(137, 255, 247, 0.64) 41%, rgba(216, 209, 101, 0.50) 83%);
    background-image: -o-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
    background-image: -moz-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
    background-image: -ms-linear-gradient(-134deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
    background-image: linear-gradient(-224deg, rgba(255, 0, 199, 0.50) 0%, rgba(255, 220, 30, 0.50) 100%);
    background-image: -o-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
    background-image: -moz-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
    background-image: -ms-linear-gradient(-62deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
    background-image: linear-gradient(-152deg, rgba(255, 245, 127, 0.50) 0%, rgba(131, 139, 176, 0.50) 96%);
    opacity:1;
  }
  100% {
    background-image: -o-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
    background-image: -moz-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
    background-image: -ms-linear-gradient(-116deg, #1078FF 0%, #4CCCD7 95%);
    background-image: linear-gradient(-206deg, #1078FF 0%, #4CCCD7 95%);
    background-image: -o-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
    background-image: -moz-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
    background-image: -ms-linear-gradient(-44deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
    background-image: linear-gradient(-134deg, #FF1B1B 0%, rgba(204, 255, 99, 0.25) 100%);
    background-image: -o-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
    background-image: -moz-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
    background-image: -ms-linear-gradient(-134deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
    background-image: linear-gradient(-224deg, #F66514 0%, rgba(36, 30, 255, 0.25) 100%);
    background-image: -o-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
    background-image: -moz-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
    background-image: -ms-linear-gradient(-62deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
    background-image: linear-gradient(-152deg, #1CFFB5 0%, rgba(150, 157, 188, 0.25) 96%);
    opacity:1;
  }
}

Answer 1

background-image不是动画或可转换的属性，因此您无法看到它已经过渡并且它只是从一个状态跳到另一个状态。

MDN Reference | CSS Transitions Spec - Animatable CSS Properties

  

请注意，某些浏览器确实支持background-image属性的动画/转换，但它不是标准的，因此不建议使用。 [Source]

---

通过转换background-position属性，您可以获得类似的效果。我的理解是，这是因为background-position是一个数字/百分比值，因此可以转换为浏览器可以确定与background-image不同的中间状态。请查看此fiddle以获取示例。

＆＃13;

＆＃13;

.box {
  /* Do not forget to add browser prefixes for gradients and transitions */
  position: relative;
  height: 100px;
  background: -webkit-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
  background: -moz-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
  background: -o-linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
  background: linear-gradient(-224deg, #3EAD7E 0%, rgba(29, 83, 60, 0.72) 36%, rgba(0, 0, 0, 0.47) 50%, #1CFFB5 72%, rgba(150, 157, 188, 0.25) 96%);
  background-size: 200% 100%;
  background-position: 0% bottom;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.box:hover {
  background-position: 100% bottom;
}

＆＃13;

<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

另外需要注意的是，transition 必须在基类中指定，而不仅仅在:hover上指定。如果您在hover上指定，它会在移动鼠标时进行转换，但在移出时它会跳转。这个fiddle说明了它与前一个相比。