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

【问题标题】：CSS3 animation not working as expected with Bourbon libraryCSS3 动画在 Bourbon 库中无法正常工作
【发布时间】：2015-09-19 01:09:17
【问题描述】：

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

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

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

 &.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

【问题讨论】：

您的笔似乎没有任何 JavaScript。
正确，没有 Javascript。 CSS3 动画。
这会告诉我不要打开这么多标签（不，不会）。

标签： css animation bourbon

【解决方案1】：

不要在动画中使用逗号

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

【讨论】：

啊啊啊啊啊！谢谢。