CSS3-анимация + jQuery

Пример простой анимации на CSS3. Все устаревшие префиксы можно удалить. Я описал только принцип управления CSS анимацией с помощью jQuery.

CSS:

@-webkit-keyframes move {
 50% {
 -webkit-transform: rotate(20deg);
}
}
 @-o-keyframes move {
 50% {
 -o-transform: rotate(20deg);
}
}
 @-moz-keyframes move {
 50% {
 -moz-transform: rotate(20deg);
}
}
 @keyframes move {
 50% {
 transform: rotate(20deg);
}
}
#pergamena {
	position: relative;
	width: 100px;
	height: 91px;
	background-image: url(pergamena.png);
}
#penna {
	position: absolute; /* Блок с пером внутри блока с рукописью */
	width: 100px;
	height: 91px;
	bottom: 20px;
	left: 10px;
	background-image: url(penna.png);
}
/* Анимация */
#penna {
	-webkit-transform: rotate(50deg) translate(0, -22px);
	-webkit-animation-name: move;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-o-transform: rotate(50deg) translate(0, -22px);
	-o-animation-name: move;
	-o-animation-duration: 3s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: ease-in-out;
	-moz-transform: rotate(50deg) translate(0, -22px);
	-moz-animation-name: move;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-in-out;
	transform: rotate(50deg) translate(0, -22px);
	animation-name: move;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
/* При наведении мышки останавливаем анимацию и отводим плавно перо вправо на 10px (также отводим перо после остановки анимации при нажатии на кнопку "Стоп"). */
#penna:hover, #penna.off {
	-webkit-animation-name: none;
	-o-animation-name: none;
	-moz-animation-name: none;
	animation-name: none;
	margin-left: 10px;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
}
/* Класс "off" - выключаем анимацию при нажатии на кнопку "Стоп". Я "закомментировал" этот код т.к. #penna.off написал выше (см. прим. об изменениях) */
/*#penna.off {
	-moz-animation-name: none;
	-webkit-animation-name: none;
	-o-animation-name: none;
	animation-name: none;
}*/
button { 
        cursor: pointer;  /* Курсор "ручка" */
}

jQuery:

$(function() {
		$( "#stop" ).click(function() {
			$( "#penna" ).addClass( "off" ); // Добавляем класс "off"
		});
		$( "#start" ).click(function() {
			$( "#penna" ).removeClass( "off" ); // Удаляем класс "off"
		});
	});

HTML:

<div id="pergamena">
  <div id="penna"></div>
</div>
<p>
  <button id="stop">Стоп</button>
  <button id="start">Старт</button>
</p>

Внёс некоторые изменения: к #penna:hover добавил #penna.off. Теперь, после нажатия на кнопку анимация останавливается и перо плавно отводится вправо. Если оставить только #penna:hover и "раскомментировать" код ниже, то после нажатия на кнопку анимация остановится, перо займёт исходное верхнее положение, но вправо отведётся после наведения курсора.