@keyframes animation background-position not working

Support
#1

I am trying to create an animation background in a small div, but chrome is getting me unknown property name for the @keyframes all time, and I have the gradient, but I am unable to sho the animation.

  @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;

 }
#3

Hello,

In the SCSS you need to create mixin that will contain @keyframes with animation name:

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

And include it with animation name, for instance:

@include keyframes(slide-down) {
  0% { 
    opacity: 1;
  }
  90% { 
    opacity: 0;
  }
}

Then you can use it in your selectors:

.my-animation {
  background: black;
  -webkit-animation: slide-down 5s 3;
  -moz-animation: slide-down 5s 3;
  -ms-animation: slide-down 5s 3;
  -o-animation: slide-down 5s 3;
  animation: slide-down 5s 3;
}
Full example 
/* Define your theme modifications inside next mixin */
@mixin com_company_demo-hover-ext {

    .my-animation {
      background: black;

      -webkit-animation: slide-down 5s 3;
      -moz-animation: slide-down 5s 3;
      -ms-animation: slide-down 5s 3;
      -o-animation: slide-down 5s 3;
      animation: slide-down 5s 3;
    }
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@include keyframes(slide-down) {
  0% { 
    opacity: 1;
  }
  90% { 
    opacity: 0;
  }
}
#5

Actually I just put my @keyframe in helium-ext-default.scss instead of helium-ext.scss and its working, but thanks for this tip too.