如何平滑地为渐变背景设置动画

Question

我希望实现一种效果,而不是当用户将鼠标悬停在div上时,它的背景颜色变成了一个渐变,使用纯CSS,可以从一个角平滑地切换到另一个角.

我想要实现的效果,试图将其更多地用于文字,是背景的较暗部分(具有0.9不透明度的部分)在光标保持在元素上方的情况下从一个角落反复滑动到另一个角落.

实际发生的是背景从一个状态跳到另一个状态.我哪里错了？我怎样才能让它成为动画,流畅的效果？

这是我的代码:

#test {
  width: 200px;
  height: 200px;
  background-color: rgba(215, 54, 92, 0.7);
}
@keyframes test_hover {
  from {
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* Standard syntax (must be last) */
  }
  to {
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));    /* Standard syntax (must be last) */
  }
}
#test:hover {
  cursor: pointer;
  animation-name: test_hover;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

<div id="test"></div>

这是JSFiddle

这个问题从这里被引用为重复,但我认为不是.首先,该问题中没有代码使得难以理解.此外,在回答这个问题时,他使用了一个转换,但我不想进行转换,因为它只应用一次,我希望我的动画在用户悬停div时不断重复.

Answer 1

正如评论中已经指出的那样,线性渐变不像color(background-color)那样是可转换的或动画的,因为它们被认为是image(background-image).过渡效应通常通过UA计算每个中间阶段的值然后将该值应用于元素来实现.在图像的情况下,不可能在中间阶段计算值,因此它们不能被转换.

您需要转换position(background-position)来实现效果.这可以通过使用伪元素来完成,该伪元素的背景包含其linear-gradient动画的位置和动画hover.渐变应该是双向的(也就是说,它应该从一个rgba(215,54,92,0.9)到rgba(215,54,92,0.5)另一个rgba(215,54,92,0.9)),因为它需要适应动画的两个阶段,它background-size也需要是双重的(即200% 200%).然后,通过从动画的当前位置0% 100%到100% 0%所需的效果,可以实现.

#test {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: rgba(215, 54, 92, 0.7);
  transition: background-color .1s;
}
#test:hover {
  background-color: transparent;
  cursor: pointer;
}
#test:hover:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));
  background-size: 200% 200%;
  background-position: 0% 100%;
  animation-name: test_hover;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
@keyframes test_hover {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 100% 0%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="test"></div>

可以使用的另一种稍微不同的方法是添加两个伪元素,每个伪元素具有一个动画渐变阶段,然后使它们动画化opacity,使得在任何时间点只有其中一个可见.这也会产生类似的效果.

#test {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(215, 54, 92, 0.7);
  transition: background-color .1s;
}
#test:before,
#test:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  z-index: 1;
}
#test:before {
  background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));
  opacity: 0;
}
#test:after {
  background: linear-gradient(45deg, rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));
  opacity: 0;
}
@keyframes test_hover {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#test:hover:before,
#test:hover:after {
  cursor: pointer;
  animation-name: test_hover;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
#test:hover:before {
  animation-delay: 1s;
}
#test:hover:after {
  animation-delay: 3s;
}
#test:hover {
  background-color: transparent;
  transition: background-color 2s 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="test"></div>