多个过渡 css

Question

我正在尝试在悬停状态下进行多次转换。

http://cssdesk.com/VbVTX

我希望图像首先向向左旋转 20 度，然后回到起点，然后向 向右旋转 20 度。

我试过了：

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

和

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

我最好使用之前/之后吗？

提前致谢

Answer 1

CSS3 Keyframe animation 更适合制作这种效果，它们允许您定义多个状态并在这些状态之间设置动画。

以下演示将图像向左旋转 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);}
}