css3 – 用于动画关键帧的Sass Mixin,包括多个阶段和转换属性

@H_450_1@这是我想要制作的标准CSS,但是想要使用SASS mixin来完成这项工作.

标准CSS

@-webkit-keyframes crank-up {
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes crank-up {
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes crank-up {
  100% { -o-transform: rotate(360deg);}
}
keyframes crank-up {
  100% { transform: rotate(360deg);}
}

我正在使用与下面的SASS keyframes not compiling as wanted后面相同的mixin,如下所示.

mixiN

@mixin keyframes($Name) {
  @-webkit-keyframes #{$namE} {
      @content;
  }
  @-moz-keyframes #{$namE} {
      @content;
  }
  @-ms-keyframes #{$namE} {
      @content;
  }
  @keyframes #{$namE} {
      @content;
  }
}

只要没有关键帧包含需要供应商前缀的属性,上面就可以了.与transform属性一样,所有供应商前缀关键帧都应用了(在本例中)-webkit-前缀.
例如：

SCSS

@include keyframes(crank-up) {
  100% { -webkit-transform: rotate(360deg);}
}

CSS

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }

请注意上面的-webkit-和-moz-keyframe.应该是-moz-

所以,我的第一个想法是将上面的mixin改为：

改变了混合

@mixin keyframes($first-name,$last-name,$argument) {
  @-webkit-keyframes #{$first-namE} {
    -webkit-#{$last-namE}: #{$argument};
  }
  @-moz-keyframes #{$first-namE} {
    -moz-#{$last-namE}: #{$argument};
  }
  @-o-keyframes #{$first-namE} {
    -o-#{$last-namE}: #{$argument};
  }
  @keyframes #{$first-namE} {
    #{$last-namE}: #{$argument};
  } 
}

打电话给mixin看起来像

SCSS

@include keyframes(crank-up,transform,rotate(360deg)) { }

CSS

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
@-o-keyframes crank-up { -o-transform: rotate(360deg); }
@keyframes crank-up { transform: rotate(360deg); }

如果只有一个关键帧’阶段'(参见原始代码 – 页面顶部,只有100％标记),这一切都可以,原因是我的术语在关键帧’阶段’中稍微偏离了.

问题

我想像上面这样的混合使用类似的东西.

@-webkit-keyframes crank-up {
  20%,40% { -webikit-transform: translateY(34pX); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

我也研究了两个Compass Animate插件; compass-animation和更新的compass-animate,但不确定这些是否有用.我需要一些方法来添加变量并使用mixin测试它,但不知道是否可以将变量传递给mixins.

任何帮助非常感谢.谢谢

我一直在玩以下但是没有工作,只是想我会把它们加起来看看是否有人知道我哪里出错了.

实验混合物：

@mixin vendor-prefix($name,$argument,$webkit: "-webkit-",$moz: "-moz-",$o: "-o-",$stale: ""){
  #{$webkit}: #{$namE}: #{$argument};
  #{$moz}: #{$namE}: #{$argument};
  #{$o}: #{$namE}: #{$argument};
  #{$stalE}: #{$namE}: #{$argument};
}

@mixin vendor-prefix($last-name,$argument){
  @if $name == webkit { 
    -webkit-#{$namE}: #{$argument};
  } @else if $name == moz { 
    -moz-#{$namE}: #{$argument};
  } @else if $name == o { 
    -o-#{$namE}: #{$argument};
  } @else { 
    #{$namE}: #{$argument};
  } 
}

@keyframes crank-up {
  20%,40% { -webkit-transform: translateY(34pX); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes crank-up {
  20%,40% {
    -webkit-transform: translateY(34pX);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%,40% {
    -webkit-transform: translateY(34pX);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}