@关键帧动画背景-位置不工作

Question

我试着在一个小的div中创建一个动画背景，但是chrome一直给我@keyframe的未知属性名，我有渐变，但我不能sho动画。

  @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 me主题的扩展。我不知道怎么解决这个问题。

Answer 1

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