Why is -webkit-keyframes not working in my SASS mixin?

Posted by Tintin81 on Stack Overflow See other posts from Stack Overflow or by Tintin81
Published on 2013-10-22T18:19:57Z Indexed on 2013/10/22 21:54 UTC
Read the original article Hit count: 207

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about css3

Related posts about webkit