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定位。

更新的无限的shakin'：jsFiddle

CSS3动画重复转换效果

2 个答案: