@keyframes анимация background-position не работает

Я пытаюсь создать анимационный фон в небольшом div, но хром все время дает мне неизвестное имя свойства для @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 framework и scss для этого, это важно?

Вот в инспекторе я получаю ошибку

Это происходит только со мной, потому что я делаю расширение темы hellium для куба-платформы. Я не знаю, как это решить.