CSS3 анимация эффекта повтора преобразования

Question

Я хочу создать анимационные эффекты, которые как бы «встряхивают» изображение при наведении курсора.Это похоже на эффекты iPhone, которые появляются, когда вы удерживаете приложение в течение нескольких секунд, и все приложения начинают дрожать.

Было бы лучше, если бы это было возможно при использовании чистого CSS3, но если это невозможно, я могу использовать Javascript/ jQuery также.

Так что же я получил до сих пор?Это просто одностороннее вращение с использованием чистого CSS:

img:hover {
    -webkit-transform: rotate(3deg);
    -webkit-transition: all 0.5s ease-in-out;
}​

http://jsfiddle.net/27UeT/

Для совместимости с браузером необходимо только, чтобы он работал на Chrome.

Answer 1

Благодаря ссылке m90 я получил этот код:

http://jsfiddle.net/27UeT/1/

img:hover {

    -webkit-animation-name: thumb;
    -webkit-animation-duration: 1000ms;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite; /* The magic keyword for infinite*/
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes thumb {
    0% { -webkit-transform: rotate(3deg); }
    50% { -webkit-transform: rotate(-3deg); }
    100% { -webkit-transform: rotate(3deg); }
}

Answer 2

Если вам нужно решение javascript / jQuery, я создал немного потрясающий jsFiddle .
Он использует jQuery пользовательских анимаций, чтобы добавить немного дрожания :) при наведении курсора.
Однако для этого требуется, чтобы изображение было absolute.

Обновление Неограниченное потрясение ': jsFiddle