Анимация CSS3: Bouncing Along (easeOutBounce)

Время JQuery (и других библиотек) в отношении применения эффектов по немного отходит на задний план т.к. чистый css3 легко справляется с тем, что еще вчера требовало подключение сторонних многокилобайтных библиотек и плагинов.

CSS3 позволяет уже сейчас сделать эффект Безье и не только.

Лишь простой пример анимации по типу easeOutBounce:

CSS код:

.box {
		background-color:#BBB;
		width:80px;
		height:80px;
		border:5px solid #555;
		border-radius:15px;
	}
	.bounce {
		position:absolute;
		top:500px;
		left:50%;
		margin-left:-40px;
		
		-moz-animation-name:bounce;
		-moz-animation-duration:1s;
		-moz-animation-fill-mode:backwards;
		-moz-animation-delay:0.5s;
		
		-webkit-animation-name:bounce;
		-webkit-animation-duration:1s;
		-webkit-animation-fill-mode:backwards;
		-webkit-animation-delay:0.5s;
		
		animation-name:bounce;
		animation-duration:1s;
		animation-fill-mode:backwards;
		animation-delay:0.5s;
	}
	
	@-webkit-keyframes bounce {
		0% 	{ top:000px; -webkit-animation-timing-function:ease-in;  }
		37% 	{ top:500px; -webkit-animation-timing-function:ease-out; }
		55% 	{ top:375px; -webkit-animation-timing-function:ease-in;  }
		73% 	{ top:500px; -webkit-animation-timing-function:ease-out; }
		82% 	{ top:465px; -webkit-animation-timing-function:ease-in;  }
		91% 	{ top:500px; -webkit-animation-timing-function:ease-out; }
		96% 	{ top:490px; -webkit-animation-timing-function:ease-in;  }
		100%	{ top:500px; }
	}
	@-moz-keyframes bounce {
		0% 	{ top:000px; -moz-animation-timing-function:ease-in;  }
		37% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		55% 	{ top:375px; -moz-animation-timing-function:ease-in;  }
		73% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		82% 	{ top:465px; -moz-animation-timing-function:ease-in;  }
		91% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		96% 	{ top:490px; -moz-animation-timing-function:ease-in;  }
		100%	{ top:500px; }
	}
	@keyframes bounce {
		0% 	{ top:000px; -moz-animation-timing-function:ease-in;  }
		37% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		55% 	{ top:375px; -moz-animation-timing-function:ease-in;  }
		73% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		82% 	{ top:465px; -moz-animation-timing-function:ease-in;  }
		91% 	{ top:500px; -moz-animation-timing-function:ease-out; }
		96% 	{ top:490px; -moz-animation-timing-function:ease-in;  }
		100%	{ top:500px; }
	}

Вставляем HTML в нужную часть страницы:

<div class="box bounce"></div>