Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

CSS Transitions and Transforms with JavaScript

branch: develop

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Demos
Octocat-spinner-32 Source
Octocat-spinner-32 Tests
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
README.md

CSSAnimation

CSS Transforms and Transitions with JavaScript.

  • CSSAnimation.js - Base, vanilla JavaScript implementation, no library required.
  • CSSAnimation.MooTools.js - MooTools API to the base constructors, requires CSSAnimation.js.
  • CSSAnimation.jQuery.js - jQuery API to the base constructors, requires CSSAnimation.js.

Quick Examples

// Vanilla JavaScript
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
$('some-el').setTransition({
  property: 'transform',
  'timing-function': 'ease-in',
  duration: '2s'
}).rotate(720).scale(2);

// jQuery
$('#some-el').setTransition({
  property: 'transform',
  'timing-function': 'ease-in',
  duration: '2s'
}).rotate(720).scale(2);

Browser Support

  • Safari
  • Chrome
  • Mozilla
  • Opera
  • IE 9 (theoretically, haven't tested yet)

Insofar as the version supports transform and transition.

About this Repository

  • Tracking branch is develop
  • Master branch contains only tagged releases
  • MooTools' Packager ready
  • Contributors welcome!

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. If transform 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 (does not yet support just skew(x, y))
  • matrix

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 Safari only z.
  • value (number) - The amount to translate in %, except for z 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 safari only x and y.
  • 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
// Safari only, 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 and y.
  • 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 and y.
  • 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.

Transform method: matrix

Specifies a 2D transformation matrix.

Signature

transform.matrix(a, b, c, d, x, y);
mooElement.matrix;
jQueryCollection.matrix;

Arguments

Arguments combine to build the transform matrix. All arguments are numbers.

|a c| |x|
|b d| |y|

Examples

transform.matrix(1, 0.1, 0.5, 1,  50, 50);
mooElement.matrix(1, 0.1, 0.5, 1,  50, 50);
jQueryCollection.matrix(1, 0.1, 0.5, 1,  50, 50);
Something went wrong with that request. Please try again.