CSS3动画与Bourbon库无法正常工作

时间:2015-09-18 16:55:01

标签: css css3 animation bourbon

使用Bourbon定义CSS3动画样式。我现在一直在靠墙砸墙几个小时,试图弄清楚发生了什么。我试图动画一个绝对定位在另一个圆圈顶部的圆圈。圆圈从以下样式开始:

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

1 个答案:

答案 0 :(得分:1)

不要在动画中使用逗号

{
    int i, j;
    int count = 0;
    for (i = row - 1; i <= row + 1; i++)
       for (j = col - 1; j <= col + 1; j++) 
           count += grid[i][j]; }

    if (row==maxrow-1 || row==0)
         count = count+ grid [(row-(maxrow-1))*-1][col-1]+grid[(row-(maxrow-1))*-1][col]+grid[(row-(maxrow-1))*-1][col+1];

    if (col==0 || col==maxcol-1)
         count=count +grid[row-1][(col-(maxcol-1))*-1]+grid[row][(col-(maxcol-1))*-1]+grid[row+1][(col-(maxcol-1))*-1];



    count -= grid[row][col];
    return count;
    }