animation mixin only adds the animation-name property

[yoavniran]

Hi, Im using this include in a class style in my scss:

.my-arrow{
    @include animation(arrow-bounce 0.5s linear 0s infinite normal forwards initial);
}

the result in my css is:

.my-arrow{
   -webkit-animation: arrow-bounce;
      -moz-animation: arrow-bounce;
      -ms-animation: arrow-bounce;
      -o-animation: arrow-bounce;
      animation: arrow-bounce;
}

None of the other properties is used... am I doing something wrong?

thanks

[danielrz]

hi Yoav, What's up? ;) For what I know, there is no such an animation name arrow-bounce in compass. Use bounce instead and it will work!

[yoavniran]

thanks @danielrz but thats not the issue. "arrow-bounce" is my animation, In my CSS I have the matching keyframes:

@include keyframes(arrow-bounce) {
  from {
    ...
  }
  to {
    ...
  }
}

The issue is that none of the settings Im passing to the animation mixin come through in the transpiled CSS.

note that if I just have (without the mixin):

animation: arrow-bounce 0.6s ease 0s 12 normal forwards;

in my class everything works. But I dont get the browser specific rules.

Yoav.

[danielrz]

hi Yoav,

i understand your question now. use 0% and 100% notation instead of from and to Daniel-

[yoavniran]

@danielrz thats not the issue. As i wrote, everything works when not using the animation mixin. The problem is with the mixin itself it seems.

"from" and "to" are valid keyframes syntax: http://www.w3.org/TR/css3-animations/#timing-functions