CSS3动画重复变换效果答案

【问题标题】：CSS3 animation repeat transform effectCSS3动画重复变换效果
【发布时间】：2016-10-27 18:47:33
【问题描述】：

我想创建一种动画效果，在悬停时“摇晃”图像。就像你按住一个 App 几秒钟，所有 App 开始抖动时出现的 iPhone 效果一样。

如果可以使用纯 CSS3 是最好的，但如果不可能，我也可以使用 Javascript/jQuery。

那么到目前为止我得到了什么？它只是使用纯 CSS 的单向旋转：

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

http://jsfiddle.net/27UeT/

关于浏览器兼容性，唯一的要求是它应该适用于 Chrome。

【问题讨论】：

也许这有帮助：cssreset.com/2011/css-tutorials/…
效果很好！非常感谢 m90 =)

标签： jquery css

【解决方案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); }
}

【讨论】：

【解决方案2】：

如果您想要javascript/jQuery 解决方案，我创建了一个小震动jsFiddle。
它使用jQuery 自定义动画在悬停时添加一点摇晃:)。
但是，它确实需要将图像定位为absolute。

更新无限摇晃：jsFiddle

【讨论】：

哇，这很酷，而且强度大，不会重复。还是谢谢
@SimonEdström 需要吗？
我搜索了一种方法来重复自己，看看我的答案。
@SimonEdström 我也更新了我的小提琴，看看。这将适用于所有浏览器（通常）。在 FF 中测试。
@jb102000 谢谢，但我找到了我搜索的内容。但是，当鼠标离开时，您的动画不会停止。还是谢谢