CSS3动画与波本图书馆无法按预期方式工作

Question

使用波旁界定义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

Answer 1

不要使用逗号动画

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