Sass mixins: having issues with translateX and translateY - css

Question

I created a mixin to animate opacity and horizontal/vertical position. I've read through the documentation on SASS site. The mixin currently animates the opacity but fails to move elements -- translateX and translateY.
#mixin keyframes($animation-name, $axis, $start, $end) {
#keyframes #{$animation-name} {
0% {
opacity: 0;
transform: #{$axis}(#{$start});
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: #{$axis}(#{$end});
}
}
}
#include keyframes(slideLeft, translateX, 0, 200px);
.slide-left {
animation: slideLeft 2s ease .1s forwards;
}
.redbox {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
<div class="redbox slide-left">
</div>
Here is a link to the JS fiddle that supports SCSS: enter link description here
I've been banging my head for a while trying to figure out what I'm doing wrong. Any help appreciated.

Answer 1

The problem is how Sass is compiling the code. You need to use a literal string for the definition of the transform value (the translate function). So you need to create the value of the property as a string and then use the unquote function to output the value:
#mixin keyframes($animation-name, $axis, $start, $end) {
#keyframes #{$animation-name} {
0% {
opacity: 0;
transform: unquote("#{$axis}(#{$start})");
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: unquote("#{$axis}(#{$end})");
}
}
}
Demo here.
Hope it helps.