Mixin Sass pour l'animation de l'image clé qui comprend plusieurs étapes et de transformer la propriété

Ici est la norme CSS, je suis en train de produire, mais souhaitez utiliser un Mixin SASS pour faire le travail.

CSS STANDARD

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

Je suis en utilisant le même mixin comme dans le post suivant, SASS images clés ne publiait pas comme voulu qui est indiqué ci-dessous.

MIXIN

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

Ci-dessus est OK, tant qu'aucune des images clés comprennent une propriété qui nécessite un fournisseur de préfixe. Comme la transformation de la propriété que tous les fournisseurs préfixé images clés appliquée (dans ce cas) l'-webkit - préfixe.
Par exemple:

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

Avis ci-dessus, -webkit - avec -moz-image-clé. Devrait -moz-

Donc, ma première pensée a été de modifier le mixin pour:

MODIFIÉ 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};
  } 
}

Avec un appel à la mixin à la recherche comme

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

Cela fonctionne tout est ok si il y a UNE seule image-clé "stage" (voir dans le code d'origine - haut de la page, il n'est que le seuil de 100%), excuse si ma terminologie est un peu hors, en référence à l'image clé "stage".

PROBLÈME

Je veux un mixin comme ci-dessus à travailler avec quelque chose comme.

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

J'ai aussi regardé dans les deux Boussole Animer des plugins; boussole-animation et la plus récente boussole-animer mais pas vraiment sûr si cela peut aider. J'ai besoin d'une certaine manière d'ajouter dans une variable et le test de ce avec un mixin, mais ne sais pas si c'est possible de passer la variable en mixin.

Toute aide appréciée. Grâce

J'ai été jouer avec ce qui suit, mais ne travaillent pas, juste pensé que je pourrais ajouter pour voir si quelqu'un sait où je vais mal.

EXPÉRIMENTALE MIXIN:

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