Skip to content

Collection of ready-to-go cross-browser CSS animations that you can drop into any website. Originally sourced from Animate.css, but now powered by Less.js. It's CSS, with just a little more.

License

Notifications You must be signed in to change notification settings

codeworksdev/animate.less

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Further Reading

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!


License

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

About

Collection of ready-to-go cross-browser CSS animations that you can drop into any website. Originally sourced from Animate.css, but now powered by Less.js. It's CSS, with just a little more.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages