Transition

Animate a change between different object states.

You can use this class to animate change of up to 5 different properties. If you need more that that (wow!) it's easy to add more of these classes.

Transition takes 4 values:

• transition-property - choose a property you want to animate (margin, colour etc.). Default value is "all" which will animate every change that might happen. It's a good idea to explicitly write this value if you want to animate everything, though. We can't be sure if in the future default state won't change to "none", which will break the whole transition.

• transition-duration - specifies how long transition animation will have to take until animation is finished. Put values in s (seconds) or ms (milliseconds). Required value, since default state is 0s (no animation occurs).

• transition-timing-function - this value describe an acceleration function. It can really affect overall experience, so it's good idea to pay attention to that. Timing function takes 4 number values of keywords: linear, ease, ease-in, ease-in-out, ease-out. For further explanation refer to -> http://developer.mozilla.org/en/CSS/timing-function Default value is "ease".

• transition-delay - in seconds or millisecond describes how long transition will wait until it occurs after a triggering requirement was met. Default value is 0 - instant animation.

In case you want to put a transformation property into transition effect, use the .transition-transform class. This class is prepared to automatically add many browsers prefixes required in that case. It is also a bit future friendly, but all at all using transitions on transform is very risky. -> http://radiatingstar.com/transition-with-transform-cant-be-future-proof

Usage

For .transition class, put in brackets at least a time value. If you want to animate more than one property or animate everything with different functions, put up to 5 declarations separated with commas. If one of the property you want to animate is "transform" and you want to animate every other properties (or at least not with the same functions), use .transition-transform. As a first value put a time duration for transform property. Do not write this property though. It's auto-added for the first set of values. Add other properties after commas. Refer to the example 3.

Browsers support: IE10+, Fx4+, Chrome, Opera, Safari, Opera Mobile, Android Browser

Notable lack of support: IE9-, Fx3.6-, Opera Mini

Transition provides only a visual effects between states. It's perfectly safe to use. Users with older browser just won't see a phase of changing.

Examples

1. .transition (all 1s); // Animate all properties for 1 second.

2. .transition (background-color 5s, margin 1s linear 5s) // Animate change of background-color for 5s and after 5s animate margin change for 1s.

3. .transition-transform (2s linear, padding 3s) // Animate change of transform property (no "transform" declared!) and padding property.

---

Code

.transition (@arguments1) {
	-webkit-transition: @arguments1;
	-moz-transition: @arguments1;
	-ms-transition: @arguments1;
	-o-transition: @arguments1;
	transition: @arguments1;
	}
.transition (@arguments1, @arguments2) {
	-webkit-transition: @arguments1, @arguments2;
	-moz-transition: @arguments1, @arguments2;
	-ms-transition: @arguments1, @arguments2;
	-o-transition: @arguments1, @arguments2;
	transition: @arguments1, @arguments2;
	}
.transition (@arguments1, @arguments2, @arguments3) {
	-webkit-transition: @arguments1, @arguments2, @arguments3;
	-moz-transition: @arguments1, @arguments2, @arguments3;
	-ms-transition: @arguments1, @arguments2, @arguments3;
	-o-transition: @arguments1, @arguments2, @arguments3;
	transition: @arguments1, @arguments2, @arguments3;
	}
.transition (@arguments1, @arguments2, @arguments3, @arguments4) {
	-webkit-transition: @arguments1, @arguments2, @arguments3, @arguments4;
	-moz-transition: @arguments1, @arguments2, @arguments3, @arguments4;
	-ms-transition: @arguments1, @arguments2, @arguments3, @arguments4;
	-o-transition: @arguments1, @arguments2, @arguments3, @arguments4;
	transition: @arguments1, @arguments2, @arguments3, @arguments4;
	}
.transition (@arguments1, @arguments2, @arguments3, @arguments4, @arguments5) {
	-webkit-transition: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-moz-transition: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-ms-transition: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-o-transition: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	transition: @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	}
.transition-transform (@transformArguments) {
	-webkit-transition: -webkit-transform @transformArguments;
	-moz-transition: -moz-transform @transformArguments;
	-ms-transition: -ms-transform @transformArguments;
	-o-transition: -o-transform @transformArguments;
	}
.transition-transform (@transformArguments, @arguments1) {
	-webkit-transition: -webkit-transform @transformArguments, @arguments1;
	-moz-transition: -moz-transform @transformArguments, @arguments1;
	-ms-transition: -ms-transform @transformArguments, @arguments1;
	-o-transition: -o-transform @transformArguments, @arguments1;
	}
.transition-transform (@transformArguments, @arguments1, @arguments2) {
	-webkit-transition: -webkit-transform @transformArguments, @arguments1, @arguments2;
	-moz-transition: -moz-transform @transformArguments, @arguments1, @arguments2;
	-ms-transition: -ms-transform @transformArguments, @arguments1, @arguments2;
	-o-transition: -o-transform @transformArguments, @arguments1, @arguments2;
	}
.transition-transform (@transformArguments, @arguments1, @arguments2, @arguments3) {
	-webkit-transition: -webkit-transform @transformArguments, @arguments1, @arguments2, @arguments3;
	-moz-transition: -moz-transform @transformArguments, @arguments1, @arguments2, @arguments3;
	-ms-transition: -ms-transform @transformArguments, @arguments1, @arguments2, @arguments3;
	-o-transition: -o-transform @transformArguments, @arguments1, @arguments2, @arguments3;
	}
.transition-transform (@transformArguments, @arguments1, @arguments2, @arguments3, @arguments4) {
	-webkit-transition: -webkit-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4;
	-moz-transition: -moz-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4;
	-ms-transition: -ms-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4;
	-o-transition: -o-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4;
	}
.transition-transform (@transformArguments, @arguments1, @arguments2, @arguments3, @arguments4, @arguments5) {
	-webkit-transition: -webkit-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-moz-transition: -moz-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-ms-transition: -ms-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	-o-transition: -o-transform @transformArguments, @arguments1, @arguments2, @arguments3, @arguments4, @arguments5;
	}