Animate.less

CSS animations framework for Less.js CSS compilers.

v2.0

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.

What is Less.js?

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.

Usage

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.

Script-less Animations

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.

API

Shorthand Mixins

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

#a.animated( [property animation_name][, time duration][, time delay][, number|infinite iterations] )

Defines the animation CSS property for an element, while automatically setting animation-fill-mode according to the @o_animateless_fill variable.

#a.animations

#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

#a.backface-visibility( mixed value )

Defines the backface-visibility CSS property, which determines whether the back face of an element is visible when turned towards the user.

#a.delay

#a.delay( a|t type, time unit )

Specifies either the animation-delay or transition-delay CSS property for an element, depending on the type given. If type is a, assumes animation-delay. If type is t, assumes transition-delay.

#a.direction

#a.direction( mixed value )

Defines the animation-direction CSS 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.duration( a|t type, time unit )

Specifies either the animation-duration or transition-duration CSS property for an element, depending on the type given. If type is a, assumes animation-duration. If type is t, assumes transition-duration.

#a.fill

#a.fill( mixed mode )

Defines the animation-fill-mode CSS property, which specifies how a CSS animation should apply styles to its target before and after its execution.

#a.iterate

#a.iterate( number|infinite iterations )

Defines the animation-iteration-count CSS 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

#a.keyframes( property animation_name, block frames )

Generates a new @keyframes CSS 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_prefixed is true, generates vendor-prefixed keyframes for maximum cross-browser compatibility.

EXAMPLE
#a.keyframes(
   fadeIn; {
       from { opacity: 0; }
       to   { opacity: 1; }
       }
   );

#a.timing

#a.timing( a|t type, string|function timing_function )

Specifies either the animation-timing-function or transition-timing-function CSS property for an element, depending on the type given. If type is a, assumes animation-timing-function. If type is t, assumes transition-timing-function.

#a.transform

#a.transform( mixed values )

Defines the transform CSS 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

#a.transform-origin( mixed values )

Defines the transform-origin CSS property, which sets the origin for an element's transformations.

#a.transition

#a.transition( [property name][, unit duration][, unit delay][, string|function timing_function] )

Defines a single transition CSS property, which is a shorthand property for the variable transition properties: transition-property, transition-duration, transition-timing-function, transition-delay.

#a.transitions

#a.transitions( list transitions; )

Defines one or more transition CSS 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

#a.vendor( property name, mixed value )

Generates cross-browser CSS properties according to the current configuration.

#a.animation

#a.animation( property animation_name )

Specifies one or more animations names that should be applied to an element. Each name indicates an @keyframes at-rule that defines the property values for the animation sequence.

Underscored Shorthand Mixins

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.

Global Variables

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

Cheat Sheet

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

License

Animate.less is licensed under the MIT license. (http://opensource.org/licenses/MIT)

codeworksdev / animate.less

Animate.less

What is Less.js?

Usage

Script-less Animations

API

Shorthand Mixins

#a.animated

#a.animations

#a.backface-visibility

#a.delay

#a.direction

#a.duration

#a.fill

#a.iterate

#a.keyframes

#a.timing

#a.transform

#a.transform-origin

#a.transition

#a.transitions

#a.vendor

#a.animation

Underscored Shorthand Mixins

Global Variables

Cheat Sheet

Further Reading

License

About

Languages