Less Keyframes Mixin

keyframes.less

// The mixins
// ---------------------------------------------------------------------
.keyframes(@name, @frames) {
    @-webkit-keyframes @name { @frames(); }
    @keyframes @name { @frames(); }
}

.transform(@string) {
    -webkit-transform: @string;
    -ms-transform: @string;
    transform: @string;
}


// The keyframe definition
// ---------------------------------------------------------------------
.keyframes(slideInDown, {
    0% {
        .transform(translateY(-100%));
    }
    100% {
        .transform(translateY(0));
    }
});


// The output
// ---------------------------------------------------------------------
@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}