CSS3 animation not working as expected with Bourbon library

Question

Using Bourbon to define CSS3 animation styles. I've been bashing my head against the wall for hours now trying to figure out what's going on. I'm trying to animate a once circle that's absolutely positioned on top of another circle. The circle starts off with the following styles in place:

.circle {
    $diameter: 50px;
    @include transform(translate(-15px, -15px));
    border-radius: 50%;
    height: $diameter;
    left: 50%;
    position: absolute;
    top: 20%;
    width: $diameter;
}

I've got a class that defines animation like this:

 &.circle-move {
  @include animation(circle-move, 3s, ease-in-out, 2);
}

And keyframes defined like this:

@include keyframes(circle-move) {
  0% {
    @include transform(translate(-15px, -15px));
  }

  12.5% {
    @include transform(translate(-30px, -30px));
  }

  25% {
    @include transform(translate(-30px, 0));
  }

  37.5% {
    @include transform(translate(0, 0));
  }

  50% {
    @include transform(translate(-15px, -15px));
  }
}

And yet there's no movement. What am i doing wrong!? Any help is appreciated.

http://codepen.io/anon/pen/YyqdPM?editors=110

Answer 1

Don't use comma in the animation

 &.circle-move {
     @include animation(circle-move 3s ease-in-out 2);
}