如何让波旁酒发挥作用？

Question

刚开始使用 bourbon mixins 并尝试让这个动画正常工作。我从波本威士忌中复制了这种风格。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);
}

这是我的 html:

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

虽然动画不工作。我该如何解决？

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

Answer 1

两件事：

animation mixin 对于其他四个 mixin（animation-name、animation-duration、animation-timing-function、animation-iteration-count）是 shorthand。所以不需要包括所有这些；选择 shorthand 或单独的 mixins。
您仍然需要定义这些调用的实际关键帧动画。

这里有一个 CodePen 来展示这一切是如何组合在一起的：http://codepen.io/tysongach/pen/ojXOQZ

如何让波旁酒发挥作用？

How to get bourbonmixin working?

sass

bourbon