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;
}
I'm using cuba framework and scss for this, It's important?
Here in the inspector is where I get the error
This only happends to me because I am doing an extension from the cuba-platform hellium theme. I don't know how to solve it.
The problem is I was using helium-ext.scss, and in this cases you have to use helium-ext-defaults.scss. It was inded related with cuba-framerwork and his theme. To solve it just put you @keyframe inside of helium-ext-defaults.scss and the rest of the code on helium-ext.scss.
