A simple and elegant keyframes mixin for LESS

keyframes-mixin.less

// --------------
// Needs LESS compiler >= 1.7.0
// Docs : http://lesscss.org/features/#detached-rulesets-feature
// --------------

// 1. Define the mixin for cross browser keyframes

.keyframes(@name,@rules) {

    @-webkit-keyframes @name {
        @rules();
    }

    @-moz-keyframes @name {
        @rules();
    }

    @-ms-keyframes @name {
        @rules();
    }

    @-o-keyframes @name {
        @rules();
    }

    @keyframes @name {
        @rules();
    }
}

// 2. Use the mixin to create an animation

.keyframes(pulse, {
    0% , 50% , 100% {
        opacity: 0;
    }

    25% , 75% {
        opacity: 1;
    }
});

// 3. Apply your animation

.pulse {
    animation: pulse 0.5s 1 both;
    -ms-animation: pulse 0.5s 1 both;
    -moz-animation: pulse 0.5s 1 both;
    -webkit-animation: pulse 0.5s 1 both;
    -o-animation: pulse 0.5s 1 both;
}

output.css

/* It should output something like this... Yeah ! */

@-webkit-keyframes pulse {
  0%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}
@-moz-keyframes pulse {
  0%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}
@-ms-keyframes pulse {
  0%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}
@-o-keyframes pulse {
  0%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}
@keyframes pulse {
  0%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}
.pulse {
  animation: pulse 0.5s 1 both;
  -ms-animation: pulse 0.5s 1 both;
  -moz-animation: pulse 0.5s 1 both;
  -webkit-animation: pulse 0.5s 1 both;
  -o-animation: pulse 0.5s 1 both;
}

id love to know how to use it keyframes on spin and slidein personally. there really needs to be a small library for keyframes in less i tell ya. if it werent for a school project i wouldnt even be bothering.