Can't Separate CSS Animations into SASS Partial with Compass - css

Question

I'm trying to separate my animations from my main css. All of my partials are imported in one main styles.scss. When I have my animations at the bottom of my _footer.scss file, where the file that the animation is being called, then Compass will compile my sass. However, when I pull the animation out and put it into a partial (_animations.scss) and import it, then it gives me this error:
error sass/styles.scss (Line 3 of sass/base/_animations.sass: Invalid CSS after "0% ": expected selector, was "{ transform: sc...")
The Animation CSS:
footer#site-footer .signup-form input[type="image"]:active {
outline:none;
border:2px solid $pink;
display: inline-block;
-webkit-animation: shrink-n-grow 0.4s;
-moz-animation: shrink-n-grow 0.4s;
-ms-animation: shrink-n-grow 0.4s;
-o-animation: shrink-n-grow 0.4s;
animation: shrink-n-grow 0.4s;
}
#keyframes shrink-n-grow {
0% { transform: scale(1.0); }
60% { transform: scale(0.85); }
100% { transform: scale(1.0); }
}
#-webkit-keyframes shrink-n-grow {
0% { -webkit-transform: scale(1.0); }
60% { -webkit-transform: scale(0.85); }
100% { -webkit-transform: scale(1.0); }
}
#-moz-keyframes shrink-n-grow {
0% { -moz-transform: scale(1.0); }
60% { -moz-transform: scale(0.85); }
100% { -moz-transform: scale(1.0); }
}
#-o-keyframes shrink-n-grow {
0% { -o-transform: scale(1.0); }
60% { -o-transform: scale(0.85); }
100% { -o-transform: scale(1.0); }
}
#-ms-keyframes shrink-n-grow {
0% { -ms-transform: scale(1.0); }
60% { -ms-transform: scale(0.85); }
100% { -ms-transform: scale(1.0); }
}
I've tried importing it before and after my _footer.scss partial. Makes no sense to me that it'd give an error when separated but no error when in the same file because isn't it all compiling into the same file anyways? Can you not separate out animations with sass/compass? Do you have to use a mixin or something? Thanks!