Mixin para animaciones con Compass

Como bien es sabido, normalmente para realizar animaciones se tiene que tener en cuenta los distintos navegadores y sus prefijos... Anteriormente se utilizaban los prefijos
-webkit-, -moz-, -o- y -ms- que corresponden en orden a Chrome y safari, Firefox, Opera y el "maravilloso" Internet Explorer...

Con
Compass ya no es necesario, este lo simplifica a solo manejar uno de estos...

-webkit-animation-name: animation
animation-name: animation

Y con ayuda de los Mixins ya no tendremos que escribir tantas líneas de código...

Crear un
Mixin para una animación es muy sencillo, se puede hacer de esta forma...

@mixin animation-name($name)
    -webkit-animation-name: $name
    animation-name: $name
@mixin animation-duration($duration)
    -webkit-animation-duration: $duration
    animation-duration: $duration
@mixin animation-iteration-count($iteration-count)
    -webkit-animation-iteration-count: $iteration-count
    animation-iteration-count: $iteration-count
@mixin animation($name, $duration, $iteration-count)
    @include animation-name($name)
    @include animation-duration($duration)
    @include animation-iteration-count($iteration-count)

Y para que funcione la Animación en nuestro elemento lo incluimos asi...

@include animation(animation, 5s, infinite)

En este caso el nombre de la Animación es (animation) con una duración de 5 segundos (5s) y con una repetición infinita (Infinite) esto se puede reemplazar según se necesite, ahora para la parte de los Keyframes es necesario poner los prefijos,
Compass también nos ayuda en este caso, es posible realizar un Mixin y se hace de esta forma...

@mixin keyframes($name)
    @-webkit-keyframes #{$name}
        @content
    @-moz-keyframes #{$name}
        @content
    @-ms-keyframes #{$name}
        @content
    @keyframes #{$name}
        @content

El contenido de este deberá ser el que necesitemos para la Animación y se incluye de esta forma...

@include keyframes(animation)
    0%
        background: white
    50%
        background: yellow
    100%
        background: white

Aparte de esto, nuestro elemento deberá tener la propiedades apropiadas para que este funcione, tales como un ancho, un alto, un color de fondo, un borde, etc... El elemento llevara lo que el Diseño muestre que tenga que tener, pero nuestro archivo
sass se reducirá con esta sencilla ayuda...