@keyframes 动画背景位置不起作用答案

【问题标题】：@keyframes animation background-position not working@keyframes 动画背景位置不起作用
【发布时间】：2021-03-21 18:51:02
【问题描述】：

我正在尝试在一个小 div 中创建动画背景，但 chrome 一直在为我获取 @keyframes 的未知属性名称，并且我有渐变，但我无法显示动画。

  @keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
  }

  @-webkit-keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100% }
  }
  .labelSincroAlert {
 text-align: center !important;
 width: 100%;
 position: absolute;
 bottom: 0px;
 left: 0px;
 background: -webkit-linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
 background-size: 600% 100%;
 animation: gradient 16s ease infinite;
 -webkit-animation: gradient 16s ease infinite;
 animation-direction: alternate;

 }

我为此使用了 cuba 框架和 scss，这很重要吗？

Here in the inspector is where I get the error

这只是发生在我身上，因为我正在对 cuba-platform hellium 主题进行扩展。不知道怎么解决。

【问题讨论】：

“但是 chrome 一直在为我提供 @keyframes 的未知属性名称” - 不知道这应该是什么意思。如果您收到错误消息，请逐字引用它们（而不是给我们您自己的释义版本）；如果你的意思是别的，请正确解释。
我没有在控制台中收到错误，只是在样式检查器中。
我不知道你会从哪里得到这个，无法用你显示的代码重现这个。
正如你所说，你不能用常规的 html 和 css 重现它，它工作得很好。看起来与 cuba-platform 主题的扩展有关。

标签： css animation keyframe

【解决方案1】：

问题是我使用的是 helium-ext.scss，在这种情况下你必须使用 helium-ext-defaults.scss。它与 cuba-framerwork 和他的主题有关。要解决它，只需将 @keyframe 放在 helium-ext-defaults.scss 中，其余代码放在 helium-ext.scss 中。

【讨论】：