CSS3 动画在 Bourbon 库中无法正常工作

Question

使用 Bourbon 定义 CSS3 动画样式。几个小时以来，我一直在用头撞墙，试图弄清楚发生了什么。我正在尝试为一个绝对位于另一个圆圈之上的曾经的圆圈制作动画。圆圈以以下样式开始：

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

我有一个 class 定义这样的动画：

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

关键帧定义如下：

@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));
  }
}

但是没有动静。我究竟做错了什么！？感谢任何帮助。

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

Answer 1

不要在动画中使用逗号

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

CSS3 动画在 Bourbon 库中无法正常工作

CSS3 animation not working as expected with Bourbon library

css

animation

bourbon