output keyframes containing tranform properties with respective vendor prefixes

[chrisj-skinner]

Hi, Not sure if I'm using the plugin to it's full potential. But I want to output the following with the correct vendor prefixes for the transform properties that are including within the keyframes.

@include keyframes(crank-up) { 20% { -webkit-transform: translateY(160deg);} 70% { opacity: 1;} 100% { -webkit-transform: rotate(-360deg);} }

Currently I'm getting the following. Which you can see the has the webkit prefix to all the transform properties.

@-moz-keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

@-webkit-keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

@-o-keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

@-ms-keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

@keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

How would I get each keyframe have it's respective vendor prefixes for all containing transform / transition properties. Is there another mixin I need to call within the $content; area of

@include keyframes($name) { @content; }

I want the following output

@-moz-keyframes crank-up { 20% { -moz-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -moz-transform: rotate(-360deg); } }

@-webkit-keyframes crank-up { 20% { -webkit-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -webkit-transform: rotate(-360deg); } }

@-o-keyframes crank-up { 20% { -o-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -o-transform: rotate(-360deg); } }

@-ms-keyframes crank-up { 20% { -ms-transform: rotateX(160deg); } 70% { opacity: 1; } 100% { -ms-transform: rotate(-360deg); } }

@keyframes crank-up { 20% { transform: rotateX(160deg); } 70% { opacity: 1; } 100% { transform: rotate(-360deg); } }

[mirisuzanne]

Sorry for such a slow response. What you are requesting is how it should already work by default. I'm not sure what would be causing the error, but I'm also not actively maintaining this plugin. It was written for Compass, and has now moved into the Compass core.

That Compass update has been a long time coming, but I'm told it will be in a stable release very soon.

[joepagan]

Looks like he isn't using the transform include, you're just putting webkit in each time in the original animation.. Should be like this:

@include keyframes(crank-up) { 20% { @include transform(translateY(160deg)); } 70% { @include opacity(1); } 100% { @include transform(rotate(-360deg)); } }

[mirisuzanne]

@lexbi good catch, thanks!