Current version: 1.0
The intention of this project is to leverage the obvious benefits of CSS3 animations in a lightweight, easy to use and dependency-free Javascript plugin. The plugin contains three public methods, which mirror three common jQuery animation methods: slideToggle, fadeToggle, and animate, except with the use of CSS3 transitions rather than intervals a significant improvement in performance is achieved.
The three methods are as follows:
CSS3 analogue for the jQuery slideToggle() method.
NOTE: padding and margin are also included in the transition so avoid !important top padding/margin styles on sliding elements.
Duration of animation in milliseconds.
Default: 500
A CSS3 easing value, e.g. ease-in-out, linear or cubic-bezier(0,0,1,1).
Default: 'ease'
Function to call upon completion of animation.
CSS3 analogue for the jQuery fadeToggle() method.
Duration of animation in milliseconds.
Default: 500
A CSS3 easing value, e.g. ease-in-out, linear or cubic-bezier(0,0,1,1).
Default: 'ease'
Function to call upon completion of animation.
CSS3 analogue for the jQuery animate() method.
An object containing the CSS properties for the element to animate toward.
NOTE: Unlike with jQuery animate() the full CSS value should always be passed for every property, e.g. 'height' : '20px', not 'height' : 20.
Duration of animation in milliseconds.
Default: 500
A CSS3 easing value, e.g. ease-in-out, linear or cubic-bezier(0,0,1,1).
Default: 'ease'
Function to call upon completion of animation.
The methods can be called on a jQuery object in the usual way:
$('#element-to-animate').cssSlideToggle();Or, in the absence of jQuery, the methods can be called by passing a querySelector string to the CssAni namespace:
CssAni('#element-to-animate').cssSlideToggle();For more examples of usage, see the demos.