複数の遷移CSS

Question

ホバー状態に複数の遷移をしようとしています。

http://cssdesk.com/vbvtx

イメージを最初に20deg で左に左に回転させ、次に開始に戻って、次に20deg でに戻ります。

私は試してみました：

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

.

と

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

.

前後に使用するのが最善ですか？

事前感あり

Answer 1

css3 キーフレームアニメーションを作るのに適していますこの効果を使用すると、複数の状態を定義し、これらの状態の間でアニメートします。

次のデモは、画像を20度残した後、通常の状態に戻し、一時停止し、20度の左に回転させます。アニメーションはホバーで起動されます。

デモ

.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);}
}

.