Download & About
Download source code from Github here
CSSAnimation makes creating CSS transforms and transitions easy as pie. It's also framework agnostic. It has a base implementation, and then extensions to the MooTools and jQuery APIs.
Demos
Quick Examples
Native JavaScript Fiddle with this
var element = document.getElementById('some-el'),
transition = new Transition(element),
transform = new Transform(element);
transition.set({
property: 'transform',
'timing-function': 'ease-in',
duration: '2s'
});
transform.rotate(720).scale(2);
MooTools Fiddle with this
$('some-el').setTransition({
property: 'transform',
'timing-function': 'ease-in',
duration: '2s'
}).rotate(720).scale(2);
jQuery Fiddle with this
$('#some-el').setTransition({
property: 'transform',
'timing-function': 'ease-in',
duration: '2s'
}).rotate(720).scale(2);
Browser Support
- Webkit
- Mozilla
- Opera (buggy)
- IE 9 (theoretically, haven’t tested yet)
Insofar as the version supports transform and transition.
License
MIT Style license.
API Reference
The following documentation first shows the base API, then MooTools, then jQuery. All APIs take the same arguments. Assume the following objects for the rest of the documentation:
var element = document.getElementById('some-el'),
transition = new Transition(element),
transform = new Transform(element),
mooElement = document.id('some-el'),
jQueryCollection = jQuery('#some-el');
Transition
Define a CSS Transition for an element.
Transition method: constructor
Creates a new Transition
object. Constructed and cached automatically for MooTools and jQuery
Signature
new Transition(element);
// constructed and cached automatically for MooTools and jQuery
Arguments
- element - A DOM element reference
Example
var element = document.getElementById('some-el'),
transition = new Transition(element);
Transitions method: set
Signature
transition.set(rule, value);
transition.set({
rule: value,
rule2: value2
});
mooElement.setTransition
jQueryCollection.setTransition
Arguments
- rule (string) - can be any of the following:
property
- the CSS property(s) to transition. Iftransform
is specified, the proper browser prefix will be added (i.e. -webkit-). Separate multiple by commas.duration
- i.e.500ms
,1s
.timing-function
- i.e.ease
,ease-out
,ease-in-out
,cubic-bezier(x1, y1, x2, y2)
Examples
Typically you set all rules at once:
transition.set({
property: 'transform',
'timing-function': 'ease-out',
duration: '500ms'
});
But you can do them one-by-one as well:
transition.set('property', 'opacity');
transition.set('duration', '0.5s');
// supports multiple properties
transition.set('property', 'background-color, color');
// and all properties
transition.set('property', 'all');
Now, change the styles of the element and they will transition.
element.className = 'some-class-with-new-styles';
element.style.marginTop = '50px';
Or use it in conjunction with Transform
:
transform.translate('x', 100);
Transition method: clear
Clears all, or one transition rule.
Signature
transition.clear([rule]);
mooElement.clearTransition;
jQueryCollection.clearTransition;
Arguments
- rule (string) - Accepts the same values as
rule
in set. If null, clears all rules.
Examples
transition.clear('timing-function');
transition.clear(); // clears all rules
mooElement.clearTransition('property');
jQueryCollection.clearTransition('duration');
Transform
Defines and manages the state of the transform
property of an element.
Supports:
translateX
,translateY
,translateZ
rotateX
,rotateY
,rotateZ
,rotate
scale
,scaleX
,scaleY
skewX
,skewY
The matrix
and skew(x [, y])
coming soon.
Transform method: constructor
Creates a new Transform
object. Constructed and cached automatically for MooTools and jQuery
Signature
new Transform(element);
// constructed and cached automatically for MooTools and jQuery
Arguments
- element - A DOM element reference
Example
var element = document.getElementById('some-el'),
transform = new Transform(element);
Transform method: translate
Signature
transform.translate(axis, value);
transform.translate({
axis: value,
axis2: value2
});
mooElement.translate
jQueryCollection.translate
Arguments
- axis (string) - The axis to move along. Accepts
x
,y
, and 3D enabled onlyz
. - value (number) - The amount to translate in
%
, except forz
which is defined in pixels.Transform
defines the units dynamically.
Examples
transform.translate('x', 100); // moves right 100%
transform.translate({
x: 50,
y: 50
});
mooElement.translate('x', 100);
jQueryCollection.translate('x', 100);
Transform method: rotate
Rotate an element around an axis.
Signature
transform.rotate(value);
transform.rotate(axis, value);
transform.rotate({
axis: value,
axis2: value2
});
mooElement.rotate;
jQueryCollection.rotate;
Arguments
- axis (string) - The axis to rotate around. Accepts ‘z’, and 3D enabled only
x
andy
. - value (number) - The degrees to rotate.
Examples
transform.rotate(-45); // rotates element counter-clockwise around the z axis
transform.rotate('z', -45); // identical to above
// rotates 3D
transform.rotate({
x: 30,
y: 30
});
mooElement.rotate(-45);
jQueryCollection.rotate(-45);
Transform method: scale
Scale an element.
Signature
transform.scale(value);
transform.scale(axis, value);
transform.scale({
axis: value,
axis2: value2
});
mooElement.scale;
jQueryCollection.scale;
Arguments
- axis (string) - The axis to scale. Accepts
x
andy
. - value (number) - The multiplier to scale by.
Examples
transform.scale(2); // doubles in size
transform.scale('x', 1.5); // scretches horizontally
transform.scale({
x: 0.5,
y: 1.5
});
mooElement.scale(2);
jQueryCollection.scale(2);
Transform method: skew
Skew an element’s angles.
Signature
transform.skew(axis, value);
transform.skew({
axis: value,
axis2: value2
});
mooElement.skew;
jQueryCollection.skew;
Arguments
- axis (string) - The axis to skew. Accepts
x
andy
. - value (number) - The amount in degrees to skew.
Examples
transform.skew('x', 30);
transform.scale({
x: 30,
y: -10
});
mooElement.skew('x', 30);
jQueryCollection.skew('x', 30);
Notes
CSS transforms accept skew(x, y)
and skew(x)
, but this script does not. It will support this syntax eventually.