Why is -webkit-keyframes not working in my SASS mixin?
- by Tintin81
I have this SASS mixin that should make a button flash:
@mixin background_animation($color) {
-webkit-animation: backgroundAnimation 800ms infinite;
@-webkit-keyframes backgroundAnimation {
0% {background-color: $color;}
50% {background-color: red;}
100% {background-color: $color;}
}
}
I am using it like this:
@include background_animation(#000000);
However, it's not working. The background color of the button won't flash.
Can anybody tell me what I'm missing here?
P.S. The code works fine when not including it as a mixin.
The generated CSS looks like this:
-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.800000011920929s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: backgroundAnimation;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
... other rules omitted for brevity
