如何让波旁调酒工作

Question

刚刚开始玩波旁混合酒，并试图让这个动画工作。我从波旁威士忌里抄的这个风格。io/文档:

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 =预览

Answer 1

两件事:

1. animation mixin是其他四种mixin (animation-name, animation-duration, animation-timing-function, animation-iteration-count)的简写。所以没必要把这些都包括进去;选择简写或单个mixins。
2. 你仍然需要定义这些调用的实际关键帧动画

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