Transit

Super-smooth CSS transitions & transformations for jQuery

Download

Upgrading notes Upgrading from an older version? Transit should be mostly backward-compatible. See the change log for notes.

Development version You may also download the development version which has spaces and comments preserved. Curious to see how it's made? See the annotated source code!

Transitions & transformations

Here are some basic transformations.

Translate X

$('.box').transition({ x: '40px' });

Translate Y

$('.box').transition({ y: '40px' });

Translate X/Y

$('.box').transition({ x: '40px', y: '40px' });

How to use Transit

Usage is simple!

Just include this script after jQuery. Requires jQuery 1.4+. Use $('...').transition instead of jQuery's $('...').animate. It has the same syntax as animate. 

$("div").transition({ x: 200 });

Transformations

Transit provides the following transformations for use with $('...').transition and $('...').css. See the README file for more information.

  • x (px)
  • y (px)
  • translate (x, y)
  • rotate (deg)
  • rotateX (deg)
  • rotateY (deg)
  • rotate3d (x, y, z, deg)
  • scale (x, [y])
  • perspective (px)
  • skewX (deg)
  • skewY (deg)

Animate anything

Transition any CSS property. They will happen much smoother than if you were to use jQuery's default .animate().

$('.box').transition({ opacity: 0 });
$('.box').transition({ marginTop: '10px', height: '22px' });

2D transformations

Here are some CSS3 transformations supported by Transit.

Translate

$('.box').transition({ x: 40, y: 40 });

Rotate

$('.box').transition({ rotate: '45deg' });

Scale

$('.box').transition({ scale: 2.2 });

Scale (not in proportion)

$('.box').transition({ scale: [2.0, 1.5] });

Skew X

$('.box').transition({ skewX: '30deg' });

Skew Y

$('.box').transition({ skewY: '30deg' });

3D transformations

You may rotate using rotateX and rotateY. Using perspective is optional, but it should always come before rotateX/Y. Try it in Firefox 10+ or Webkit browsers!

Rotate X

$('.box').transition({
  perspective: '100px',
  rotateX: '180deg'
});

Rotate Y

$('.box').transition({
  perspective: '100px',
  rotateY: '180deg'
});

Rotate 3D

$('.box').transition({
  perspective: '100px',
  rotate3d: '1,1,0,180deg'
});

Easing

Simply provide a 3rd parameter to $.transition.

Linear

$('.box').transition(
  { x: 210 }, 500, 'linear');

Ease

$('.box').transition(
  { x: 210 }, 500, 'ease');

Snap

$('.box').transition(
  { x: 210 }, 500, 'snap');

Custom

$('.box').transition(
  { x: 210 }, 500, 'cubic-bezier(0,0.9,0.3,1)');

Supported easing types:

More features

Delay

You can specify a delay.

$('.box').transition({ scale: 0, delay: 500 });

Optional units

All units (eg, px, deg, ms) are optional.

$('.box').transition({ y: 30 });

$.fn.css

Transform properties work with .css() as well. They're not just for animation!

$('.box').css({ rotate: '30deg' });

Vendor prefixes

Vendor prefixes are auto-added for transform, transition, and others.

$('.box').css({ transform: 'scale(0.2)' });

Chaining & queuing

Transit uses jQuery's effect queue, exactly like .animate. This means transitions will never run in parallel. (You can disable the queue with queue: false.)

$('.box')
  .transition({ x: -40 })
  .transition({ y: 40 })
  .transition({ x: 0 })
  .transition({ y: 0 });

Alternate easing/duration syntax

You can provide easing and duration in the options. Great with CoffeeScript.

$('.box').transition({
  y: 55,
  easing: 'snap',
  duration: 200 });

Relative values

Start your values with either += or -= to add/subtract to current values.

$('.box').transition({
  rotate: '+=30deg',
  x: '+=10'
});

Transformation origins

You can use transformOrigin to get/set where rotations and scales start from.

$('.box')
  .css({ transformOrigin: '10px 10px' })
  .transition({ rotate: '45deg' });

Getting values

Use .css() to get values from any of the transformations defined by Transit.

$('.box').css({ rotate: '30deg' });
console.log($('.box').css('rotate'));
console.log($('.box').css('transform'));

Browser support

Supported browsers

See caniuse.com's report on CSS transitions. To support iOS4 and below, Transit uses translate3d and scale3d.

  • IE 10+
  • Firefox 4+
  • Safari 5+
  • Chrome 10+
  • Opera 11+
  • Mobile Safari

What about older browsers?

Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. 

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.
if (!$.support.transition)
  $.fn.transition = $.fn.animate;

Fallback to frame-based animation

If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate.

(Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.)

Recipes

$.fx.speeds._default = 300;

Default duration

Transit honors jQuery's default speed, $.fx.speeds._default. 

$.cssEase['bounce'] =
  'cubic-bezier(0,1,0.5,1.3)';
$('.box').transition({ x: 0 }, 500,
  'bounce');

Custom easing

Define custom easing aliases in $.cssEase. 

.box {
  -webkit-backface-visibility: hidden;
}

Webkit: prevent flickers

Having flickering problems in Webkit? Use -webkit-backface-visibility. See this question for some discussions on this. 

.box {
  -webkit-transition: translate3d(0,0,0);
}

Antialias problems in Webkit?

Force hardware-acceleration in Webkits to prevent text flickering. See this article and this article for more information.


Transit is authored and maintained by Rico Sta. Cruz with help from its contributors.

© Copyright 2011-2014, Rico Sta. Cruz. Released under the MIT License.