How to get bourbonmixin working?

Question

Just started to play with bourbon mixins and trying to get this animation working. I copied this style from the bourbon.io/docs :

box:hover {
  // Animation shorthand works the same as the CSS3 animation shorthand
  @include animation(scale 1.0s ease-in, slide 2.0s ease);

  // The above outputs the same CSS as using independent, granular mixins.
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
}

This is my html:

<section class="demo">
    <div id="run-demo" class="box"></div>
</section>

The animation does not work though. How can I fix it?

plunkr:http://plnkr.co/edit/vZrH24?p=preview

Answer 1

Two things:

1. The animation mixin is shorthand for the other four mixins (animation-name, animation-duration, animation-timing-function, animation-iteration-count). So no need to include all of those; pick either the shorthand or the individual mixins.
2. You still need to define the actual keyframe animations that these call on.

Here’s a CodePen to show how this all comes together: http://codepen.io/tysongach/pen/ojXOQZ