Animations

Create an awesome animation!

This class takes from two to five properties

• animation-name [required] - declare your @keyframes animation name. See below for an easy way to make @keyframes!

• animation-duration [required] - declare how long will it take for an animation to reach end. Value in seconds (s) or milliseconds (ms).

• timing-function - it's the same property as in transition. Refer to that topic for further explanation.

• iteration-count - how many times an animation will repeat. It takes integer or "infinite" keyword (for infinite repetition). Default value is 1.

• direction - indicates whether the animation should play in reverse on alternate cycles. Refer to -> thtp://developer.mozilla.org/en/CSS/animation-direction for better explanation. To declare a direction use normal [default value], alternate, reverse or alternate-reverse keyword.

Resources

-- http://developer.mozilla.org/en/CSS/animation

Creating @keyframes

Write in your .less file:

*** @import 'animationX.less';

where X stands for a number between 1 and 5. Then create a class

*** .animationX () {}

and in {} write declarations you normally write in @keyframes. Then just put an .animation(animationX [other animation properties]) class in your element. That's all!

Example

.toBeAnimated {
	// Animation with every possible value declared. //
	.animation(animation1 5s linear 3s infinite alternate);
	}
// Importing prefixed @keyframes for animation1.
@import 'animation1';

// Declaring @keyframes for animation. Only once! 
.animation1() {
	from {margin-top: 3px;}
	to {margin-top: 333px;}
}

---

Code

.animation (@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	-ms-animation: @arguments;
	-o-animation: @arguments;
	animation: @arguments;
	}
.animate (@arguments) {.animation(@arguments);}
.anime (@arguments) {.animation(@arguments);}