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

Question

我正在尝试在一个小 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 主题的扩展。不知道怎么解决。

Answer 1

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

中

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

@keyframes animation background-position not working

css

animation

keyframe