CSS animations framework for Less.js CSS compilers.
Originally sourced from the insanely cool Animate.css project, Animate.less takes constructing CSS animations a step further by tapping into the power of the popular Less.js CSS preprocessor to create seriously complex animations. You don't even have to use any JavaScript or jQuery magic to get the job done. It's CSS, with just a little more.
Less.js is a CSS preprocessor that extends the CSS language, adding features that introduce variables, mixins, functions, and many other techniques commonly found in popular scripting languages. This allows you to make CSS that is more maintainable, themable and extendable.
Less.js runs inside Node, in the browser and inside Rhino. There are also many 3rd-party tools available that allow you to compile your files and watch for changes. The latter is the way to go if you want to get up and running quickly.
To use Animate.less in your website, simply drop a single folder (dist/less) into your Less.js preprocessor, and compile the animate.less file inside that folder. The preprocessor will generate an animate.css stylesheet (minified CSS, if the option is available in your compiler). Once created, drop the single stylesheet into your HTML document's <head> tag, and add the class animated to every element you'd like to animate, along with any of the included animation names. That's it! You now have CSS animated elements.
HTML EXAMPLE
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Animate.less</title>
<link href="[path_to_extracted_folder]/dist/css/animate.css" rel="stylesheet">
</head>
...You can do a whole bunch of other stuff with the compiled animate.css file when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
$('#yourElement').addClass('animated flash');You can also detect when an animation ends:
$('#yourElement').one('animationend', doSomething);Note: jQuery.one() is used when you want to execute the event handler at most once. More information here.
One of the major advantages of using a Less.js preprocessor is that you can create mixins to do most of the heavy lifting for you. Their structure is similar to functions in popular scripting languages, minus the scripting engine. Mixins contain nested rules and other function calls, allowing complex CSS to be created with ease. With that said, Animate.less provides a set of pre-baked mixins that we think will make the process of constructing cross-browser CSS animations much easier.
For example, the jQuery example above can be written as a script-less CSS block:
#yourElement {
#a.animated(); // apply default animation properties
#a.iterate(infinite); // repeat all animations forever
#a.delay(a, 2s); // delay all animations for exacty 2 seconds
#a.duration(a, 3s); // each iteration will play for 3 seconds
#a.flash(); // apply a single animation
}or with the shorthand variant:
#yourElement {
#a.animated(flash, 3s, 2s, infinite);
}which will output:
#yourElement {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: flash;
-moz-animation-name: flash;
-ms-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}And there you have it! The entire animation has been achieved without using any jQuery. Of course, this is only a tiny fraction of what can be achieved with Animate.less. Please head on over to AnimateForLess.com for a live demo of this framework in action, or grab some popcorn and continue reading below to see what else is under the hood.
Animate.less contains a set of useful mixins that make the process of constructing animations much easier. Scroll down below to learn more about each mixin included with the standard distribution package.
Note: The cheat sheet at the bottom of this page contains a list of pre-baked animations available for use right out of the box.
#a.animated( [property animation_name][, time duration][, time delay][, number|infinite iterations] )
Defines the
animationCSS property for an element, while automatically settinganimation-fill-modeaccording to the@o_animateless_fillvariable.
#a.animations( list animations; )
Specifies one or more animations that should be applied to an element. Uses the animation CSS property, which is a shorthand property for the various animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.
Note: Always remember to terminate your comma-separated CSS list with a semicolon to tell the compiler a list is being passed as a single argument (reference).
#a.backface-visibility( mixed value )
Defines the
backface-visibilityCSS property, which determines whether the back face of an element is visible when turned towards the user.
#a.delay( a|t type, time unit )
Specifies either the
animation-delayortransition-delayCSS property for an element, depending on thetypegiven. Iftypeisa, assumesanimation-delay. Iftypeist, assumestransition-delay.
#a.direction( mixed value )
Defines the
animation-directionCSS property, which specifies whether an animation should play forwards, backwards, or alternating back and forth. If passing a CSS list, remember to end it with a semicolon to tell the compiler a list is being passed as a single argument (reference).
#a.duration( a|t type, time unit )
Specifies either the
animation-durationortransition-durationCSS property for an element, depending on thetypegiven. Iftypeisa, assumesanimation-duration. Iftypeist, assumestransition-duration.
#a.fill( mixed mode )
Defines the
animation-fill-modeCSS property, which specifies how a CSS animation should apply styles to its target before and after its execution.
#a.iterate( number|infinite iterations )
Defines the
animation-iteration-countCSS property specifies the number of times an animation cycle should be played before stopping. If multiple values are specified (i.e., comma-separated list), each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used.
#a.keyframes( property animation_name, block frames )
Generates a new
@keyframesCSS at-rule, which controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions. If@o_animateless_prefixedistrue, generates vendor-prefixed keyframes for maximum cross-browser compatibility.EXAMPLE
#a.keyframes( fadeIn; { from { opacity: 0; } to { opacity: 1; } } );
#a.timing( a|t type, string|function timing_function )
Specifies either the
animation-timing-functionortransition-timing-functionCSS property for an element, depending on thetypegiven. Iftypeisa, assumesanimation-timing-function. Iftypeist, assumestransition-timing-function.
#a.transform( mixed values )
Defines the
transformCSS property, which lets you rotate, scale, skew, or translate a given element. This is achieved by modifying the coordinate space of the CSS visual formatting model.
#a.transform-origin( mixed values )
Defines the
transform-originCSS property, which sets the origin for an element's transformations.
#a.transition( [property name][, unit duration][, unit delay][, string|function timing_function] )
Defines a single
transitionCSS property, which is a shorthand property for the variable transition properties: transition-property, transition-duration, transition-timing-function, transition-delay.
#a.transitions( list transitions; )
Defines one or more
transitionCSS properties for an element. This is especially useful when you need to chain multiple transitions together in a sequence. Check out some examples here.Note: Always remember to terminate your comma-separated CSS list with a semicolon to tell the compiler a list is being passed as a single argument (reference).
#a.vendor( property name, mixed value )
Generates cross-browser CSS properties according to the current configuration.
#a.animation( property animation_name )
Specifies one or more animations names that should be applied to an element. Each name indicates an
@keyframesat-rule that defines the property values for the animation sequence.
Alternatively, you can use the "underscored" variants of the shorthand mixins listed above if you need to generate CSS properties for a specific vendor prefix only (defined by the @vendor variable). More information here.
You can easily alter the contents of compiled animate.css CSS file by configuring special global variables defined inside the dist/less/_options.less import file. All supported variables are listed below.
TYPE | VARIABLE NAME | DEFAULT | DESCRIPTION
---------------------------------------------------------------------------------------------------
boolean | @o_animateless_classless | false | Generate CSS classes?
time_unit | @o_animateless_duration | 1s | Default duration for all animations
css_value | @o_animateless_fill | both | Default CSS animation fill mode for all animations
boolean | @o_animateless_prefixed | false | Generate vendor prefixes?
DOCS FOR NERDS
Below is a complete list of pre-baked animations available for use in the standard distribution package (84 total, as of this writing). Also, don't forget to head on over to AnimateForLess.com to see every animation in action!
| Attention Seekers | Bouncing Entrances | Bouncing Exits | Fading Entrances | Fading Exits |
|---|---|---|---|---|
| bounce | bounceIn | bounceOut | fadeIn | fadeOut |
| flash | bounceInDown | bounceOutDown | fadeInDown | fadeOutDown |
| flashmin | bounceInLeft | bounceOutLeft | fadeInDownBig | fadeOutDownBig |
| headShake | bounceInRight | bounceOutRight | fadeInLeft | fadeOutLeft |
| jello | bounceInUp | bounceOutUp | fadeInLeftBig | fadeOutLeftBig |
| pulse | fadeInRight | fadeOutRight | ||
| rotate | fadeInRightBig | fadeOutRightBig | ||
| rotateCC | fadeInUp | fadeOutUp | ||
| rubberBand | fadeInUpBig | fadeOutUpBig | ||
| shake | ||||
| swing | ||||
| tada | ||||
| wobble | ||||
| Flippers | Lightspeed | Rotating Entrances | Rotating Exits | Sliding Entrances |
| flip | lightSpeedIn | rotateIn | rotateOut | slideInDown |
| flipInX | lightSpeedOut | rotateInDownLeft | rotateOutDownLeft | slideInLeft |
| flipInY | rotateInDownRight | rotateOutDownRight | slideInRight | |
| flipOutX | rotateInUpLeft | rotateOutUpLeft | slideInUp | |
| flipOutY | rotateInUpRight | rotateOutUpRight | ||
| rotateZoomIn | rotateZoomOut | |||
| rotateZoomInCC | rotateZoomOutCC | |||
| Sliding Exits | Specials | Zoom Entrances | Zoom Exits | |
| slideOutDown | hinge | zoomIn | zoomOut | |
| slideOutLeft | jackInTheBox | zoomInDown | zoomOutDown | |
| slideOutRight | rollIn | zoomInLeft | zoomOutLeft | |
| slideOutUp | rollOut | zoomInRight | zoomOutRight | |
| zoomInUp | zoomOutUp |
Because Less CSS looks just like regular CSS, learning it is a breeze. Less.js only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly. We encourage you to head on over to the official Less.js documentation to learn like a pro and take advantage of everything the CSS preprocessor has to offer. Happy coding!
Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT)