Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$animation-data: (
    fadeIn: (
        from: (
        opacity: 0
        ),
        to: (
            opacity: 1
        )
    ),
    fadeOut: (
        from: (
            opacity: 1
        ),
        to: (
            opacity: 0,
            transform: (translateX(5rem), translateY(2rem)),
        )
    ),
    zoomOut: (
        0%: (
            transform: (scaleX(100%), scaleY(100%))
        ),
        100%: (
            transform: (scaleX(0%), scaleY(0%))
        )
    )
);

@mixin animation-setup($names...) {
    @each $name in $names {
        $spec: map-get($animation-data, $name);
        @keyframes #{$name} {
            @each $keyframe, $declaration in $spec {
                #{$keyframe} {
                    @each $property, $value in $declaration {
                        #{$property}: $value;
                    }
                }
            } 
        }
        .animated.#{$name} {
            animation-name: $name;
        }
    }
}

@include animation-setup(fadeIn, fadeOut, zoomOut);

SassMeister-output.css

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
.animated.fadeIn { animation-name: fadeIn; }

@keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; transform: translateX(5rem), translateY(2rem); } }
.animated.fadeOut { animation-name: fadeOut; }

@keyframes zoomOut { 0% { transform: scaleX(100%), scaleY(100%); }
  100% { transform: scaleX(0%), scaleY(0%); } }
.animated.zoomOut { animation-name: zoomOut; }