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;
}

Error: expected @keyframes identifier
Less thinks it is a variable

Error: expected @Keyframes identifier

Sorry this code is 5 years old and I don't use Less anymore. I think you no longer need to use vendor prefixes for animations though.

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.