bounce.less

gistfile1.css

/* ===================
 * Bounce animation
 */

.bounce(@orientation:left, @delta:20px, @duration:1s, @bounces:infinite) {
    -moz-animation:bounce @duration linear @bounces;
    -webkit-animation:bounce @duration linear @bounces;

	@-moz-keyframes bounce { .bounceFrames(@orientation, @delta) }
	@-webkit-keyframes bounce { .bounceFrames(@orientation, @delta) }
	@-ms-keyframes bounce { .bounceFrames(@orientation, @delta) }
	@-o-keyframes bounce { .bounceFrames(@orientation, @delta) }
	@keyframes bounce { .bounceFrames(@orientation, @delta) }
}

.bounceFrames(@orientation, @delta) when (@orientation=left) {
	from{left: 0px;}
	10%{left: (@delta*.1)/.5;}
	20%{left: (@delta*.2)/.5;}
	30%{left: (@delta*.3)/.5;}
	40%{left: (@delta*.4)/.5;}
	50%{left: @delta;}
	60%{left: (@delta*.4)/.5;}
	70%{left: (@delta*.3)/.5;}
	80%{left: (@delta*.2)/.5;}
	90%{left: (@delta*.1)/.5;}
	to{left: 0px;}
}

.bounceFrames(@orientation, @delta) when (@orientation=right) {
	from{right: 0px;}
	10%{right: (@delta*.1)/.5;}
	20%{right: (@delta*.2)/.5;}
	30%{right: (@delta*.3)/.5;}
	40%{right: (@delta*.4)/.5;}
	50%{right: @delta;}
	60%{right: (@delta*.4)/.5;}
	70%{right: (@delta*.3)/.5;}
	80%{right: (@delta*.2)/.5;}
	90%{right: (@delta*.1)/.5;}
	to{right: 0px;}
}

.bounceFrames(@orientation, @delta) when (@orientation=top) {
	from{top: 0px;}
	10%{top: (@delta*.1)/.5;}
	20%{top: (@delta*.2)/.5;}
	30%{top: (@delta*.3)/.5;}
	40%{top: (@delta*.4)/.5;}
	50%{top: @delta;}
	60%{top: (@delta*.4)/.5;}
	70%{top: (@delta*.3)/.5;}
	80%{top: (@delta*.2)/.5;}
	90%{top: (@delta*.1)/.5;}
	to{top: 0px;}
}

.bounceFrames(@orientation, @delta) when (@orientation=bottom) {
	from{bottom: 0px;}
	10%{bottom: (@delta*.1)/.5;}
	20%{bottom: (@delta*.2)/.5;}
	30%{bottom: (@delta*.3)/.5;}
	40%{bottom: (@delta*.4)/.5;}
	50%{bottom: @delta;}
	60%{bottom: (@delta*.4)/.5;}
	70%{bottom: (@delta*.3)/.5;}
	80%{bottom: (@delta*.2)/.5;}
	90%{bottom: (@delta*.1)/.5;}
	to{bottom: 0px;}
}