This transition uses CSS transforms to 'fly' elements to their natural location on the page, fading in from transparent as they go. By default, they will fly in from left.
You can change the starting (or ending, if it's an outro) x
and y
properties, as shown below – by default these values are assumed to be pixel values, but you can equally use any CSS length (such as %
or em
values).
The delay
, duration
and easing
values are also yours to play with, and behave as you'd expect. The duration
property is in milliseconds, and easing
should be a valid CSS easing property, such as those generated from cubic-bezier.com.
In browsers that do not support CSS transforms (i.e. IE8 and below), elements will simply fade in or out.