Animations keyframe mixin isn't outputting the set animation name in the CSS file.

[rpkoller]

With the install of Yosemite i was finally able to upgrade from Compass 0.12.x to Compass 1.0.1. At the moment i am in order of getting my projects running on the newer plugins. In one of my projects i am using an animation and somehow it isn't working at all. I've built a stripped down sample case on Codepen with the mixins I use in my project.

http://codepen.io/rpkoller/pen/qEZZPp

Everything works fine there. Then I've ported the same code to my local environment and let Codekit and the external Compass gem do the compiling ( the set up i am regularly using):

https://dl.dropboxusercontent.com/u/8578/anims.zip

If i check the CSS output as well as in the browser everything works and is fine. But when i try in the scope of my whole project the issue turns up. I have a partial file called _animations.scss .

@include keyframes(box-up) {
    0% {
        height:30%;
    }
    100% {
        height:100%;
    }
}

.xxxx {
    background: red;
}

i've added the .xxxx class to see if the partial is properly imported. Later on in another partial the animation mixin is called for a hover pseudo class:

.fp-bb {
    &:hover {
        @include animation(box-up 1s);
        height:100%;
        overflow:hidden;
    }   

    &:hover .fp-pro-excerpt {
        display:block;
    }

    .fp-pro-excerpt {
        display:none;
    }
}

The CSS output for the animation mixin snippet looks correct:

.fp-bb:hover {
  -webkit-animation: box-up 1s;
  -ms-animation: box-up 1s;
  animation: box-up 1s;
  height: 100%;
  overflow: hidden; }
.fp-bb:hover .fp-pro-excerpt {
  display: block; }
.fp-bb .fp-pro-excerpt {
  display: none; }

But the keyframes part differs:

@-webkit-keyframes $animation-name {
  0% {
    height: 30%; }
  100% {
    height: 100%; } }
@-ms-keyframes $animation-name {
  0% {
    height: 30%; }
  100% {
    height: 100%; } }
@keyframes $animation-name {
  0% {
    height: 30%; }
  100% {
    height: 100%; } }
.xxxx {
  background: red; }

Are there certain circumstances that lead to such a strange behaviour using the $animation-name variable instead of the given animation name? Is that bug or a misusage on my side? Best regards Ralf

[gthvidsten]

I've got the same issue (version 1.0.1)

I have the following in my SCSS file

@include keyframes(fade-out) {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

And it gets output as the following in the target CSS (I dropped all the browser compability outputs for simplicity)

@keyframes $name {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

[cimmanon]

Always make sure you're using the newest stable version if you encounter any bugs, and make sure you're not accidentally overwriting the mixin with one that is broken. I cannot reproduce this problem on Sassmeister (running Compass 1.0.3).

Looking at the source, I can't even find when this was fixed (or if it was even a problem in the first place). The last time the animations file was modified was Nov 5, 2013, which was over a year before this issue was even opened.