daneden/animate.css — Issue #22: Create a LESS version
Author: Anahkiasen
Created: 2012-02-03 10:01:12+00:00
State: open

Right now there is a big change ongoing in CSS and it's the apparition of CSS preprocessors like [LESS](http://lesscss.org/) or [SASS](http://sass-lang.com/).
These languages offer an enormous addition of potential to CSS with the benefit of being lightweight. Thus it would be a good idea to combine the power of animate.css with such of LESS per example. Thus creating a jQuery-free version of animate.css

Here's what it would look like. At the beginning of the animate.less file, this LESS mixin would replace the two first clases :

.animate(@animation: fadeIn, @duration: 1, @transition: ease, @delay: 0)
{
-webkit-animation: @animation @duration @transition @delay;
-moz-animation: @animation @duration @transition @delay;
-ms-animation: @animation @duration @transition @delay;
-o-animation: @animation @duration @transition @delay;
animation: @animation @duration @transition @delay;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

Then to apply an animation on something, instead of using jQuery or Javascript of any sort you would call that mixin and the name of the animation you want :

@import "animate.less";

.button:hover
{
.animate(wobble);
}
#body
{
.animate(bounceInRight, 5s, ease-in-out, 5s);
}

The beauty of it is that, would the animate.less be included on a page, it would still be backward compatible with using it the jQuery way since LESS files are ultimately read as CSS files.
Anyway, I just thought it would be a really amazing feature of animate.css to maintain a animate.less at the same time. It might seem arbitrary to support a third-party technology like that but I'm not joking about how big preprocessors are becoming. Even [Twitter](http://twitter.github.com/bootstrap/less.html) is using them.