Несколько переходов CSS.

Question

Я пытаюсь сделать несколько переходов на состояние Hover.

http://cssdesk.com/vbvtx

Я хочу, чтобы изображение сначала повернуто к , оставило на 20DEG , а затем вернуться к началу, а затем на прямо на 20deg .

Я пробовал:

-webkit-transform: rotate(20deg, -20deg);

.

и

-webkit-transform: rotate(20deg);
-webkit-transform: rotate(-20deg);

.

Будьте лучше всего использовать ранее / после?

Спасибо заранее

Answer 1

CSS3 анимация ключевых кадров будет лучше подходит для созданияЭтот эффект, они позволяют определить несколько состояний и анимацию между этими состояниями.

Следующая демоверсия поворачивает изображение на 20 градусов, затем назад к нормальному состоянию, паузу и поворота на 20 градусов влево.Анимация запускается на наклоне.

Demo

.whatWeDo img {
    margin:9% 0;
    height: 102px;
    width: 100px;
}
.whatWeDo img:hover {
    -webkit-animation: rotation 4s;
    animation: rotation 4s;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
@-webkit-keyframes rotation {
    0% {     -webkit-transform: rotate(0deg);}
    25% {    -webkit-transform: rotate(-20deg);}
    50% {    -webkit-transform: rotate(0deg);}
    75% {    -webkit-transform: rotate(0deg);}
    100% {   -webkit-transform: rotate(20deg);}
}
@-keyframes rotation {
    0% {     transform: rotate(0deg);}
    25% {    transform: rotate(-20deg);}
    50% {    transform: rotate(0deg);}
    75% {    transform: rotate(0deg);}
    100% {   transform: rotate(20deg);}
}

.