Animations

Examples and usage

Transition

Transition allows you to specify the values of animation properties for any html element. It works in conjunction with an effect that occurs on hover (for example). Transition allows you to specify the duration of the animation, the timing (easing) and the amount of delay before the animation occurs. Demo

Defaults

Duration: 5 seconds
Timing: linear
Delay: 0

Usage

Import the transition mixin into the less file for your site or page:

@import "[path]/mixins/animations/transition.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/animations/transition.less"

Add transition to your style(s) using defaults:

.someclass {
    .transition();
}

Add transition to your style(s) with duration of 10 seconds, easing and 2 second delay:

.someclass {
    .transition(all, 10s, ease, 2s);
}

Browser support

• Chrome
• Safari
• Firefox
• IE10
• Opera

Working on all above as at 27 Dec 2012

Links

Demo

View the transition.less file here

Rotate

Rotate allows you to specify a rotation on any element and specify the duration and number of iterations. Demo

Defaults

Duration: 1 second
Iteration: infinite

Usage

Import the rotate mixin into the less file for your site or page:

@import "[path]/mixins/animations/rotate.less";

OR using the absolute url:

@import "https://raw.github.com/commons/less/master/mixins/animations/rotate.less"

Add rotation to your style(s) using defaults:

.someclass {  
    .rotate();  
}

Add rotation to your style(s) with duration of 20 seconds, iterations infinite (default - no need to specify)

.someclass {  
    .rotate(20s);
}

Add rotation to your style(s) with duration of 10 seconds and 3 iterations:

.someclass { 
    .rotate(10s, 3);  
}  

Browser support

• Chrome
• Safari
• Firefox
• IE10
• Opera

Working on all above as at 27 Dec 2012

Links

Demo

View the rotate.less file here