Question

刚开始玩波旁威士忌mixins并尝试让这个动画有效。我从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);
}

这是我的HTML：

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

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

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

Answer 1

两件事：

animation mixin是其他四个mixins（animation-name，animation-duration，animation-timing-function，animation-iteration-count）的简写。所以不需要包括所有这些;选择简写或个别mixins。
您仍然需要定义这些调用的实际关键帧动画。

这是一个CodePen，用于展示这一切是如何结合在一起的：http://codepen.io/tysongach/pen/ojXOQZ

如何让bourbonmixin工作？

1 个答案: