css - 为什么这个 css 动画不工作？

Question

你能告诉我为什么动画在这段代码中不起作用吗？

.allTopics {
  height: 100px;
  width: 100%;
  background: linear-gradient(135deg, #ff3300, #cc00cc);
  animation: topicBackground 10s ease infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes topicBackground {
  0%   { background-position: 0% 50%;}
  50%  { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}

/* Standard syntax */
@keyframes topicBackground {
   0%   { background-position: 0% 50%;}
  50%  { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}

<div class="allTopics"></div>

目标是使 div 具有渐变背景并在两种颜色之间来回动画。

Answer 1

您正在尝试为 background-position 设置动画，但这不适用于线性渐变。它不是图像，因此它没有 background-position。

不幸的是，没有直接的方法在 CSS 中设置渐变动画，但您可以查看 this tutorial解决方法。

编辑

在评论中讨论后，您显然可以通过使用值高于 100% 的 background-size 属性来完成这项工作，例如 background-size: 400% 400%.