Jquery 使用抖动效果设置div动画

说明：

我把

div

设计成日历。现在，每当我用日期更新日历中的某些内容时，它就会出现在屏幕上

现在，我尝试用抖动效果设置

div

的动画，如下所示：

1） 向左倾斜

2） 向右倾斜

3） 向左倾斜

4） 等

到目前为止，我还不确定我是否应该在这个动画中使用JQuery/css

---

如果有人能给我指出正确的方向，我将不胜感激

我会在CSS中的某个地方处理这些问题

然后使用jquery将该类从CSS添加到div中

div.LeanRight
{
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Chrome, Safari, Opera */
    transform: rotate(3deg); /* Standard syntax */
}

div.LeanLeft
{
    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg); /* Standard syntax */
}

以下是我认为您正在寻找的内容：

这不使用jscript，只使用css:（请注意。可以根据需要更改值

@-webkit-keyframes wiggle
{
    0% {-webkit-transform: rotateZ(2deg);}
    50% {-webkit-transform: rotateZ(-2deg);}
    100% {-webkit-transform: rotateZ(2deg);}
}
@-moz-keyframes wiggle
{
    0% {-moz-transform: rotateZ(2deg);}
    50% {-moz-transform: rotateZ(-2deg);}
    100% {-moz-transform: rotateZ(2deg);}
}
@-o-keyframes wiggle
{
    0% {-o-transform: rotateZ(2deg);}
    50% {-o-transform: rotateZ(-2deg);}
    100% {-o-transform: rotateZ(2deg);}
}
@keyframes wiggle
{
    0% {transform: rotateZ(2deg);}
    50% {transform: rotateZ(-2deg);}
    100% {transform: rotateZ(2deg);}
}

.test {
    background-color: red;

    -webkit-animation: wiggle 0.2s ease infinite;
    -moz-animation: wiggle 0.2s ease infinite;
    -o-animation: wiggle 0.2s ease infinite;
    animation: wiggle 0.2s ease infinite;
}

---

听起来不错；你被困在哪里了？你的相关html和CSS是什么？你尝试了什么？出了什么问题？怎么出了问题？钟摆？壁挂？跷跷板？制作元素动画的一个好方法是使用jquery并处理边距值（比如+=50px然后-=50px等等）你能提供一些你的测试的JSFIDLE以便我们能提供帮助吗？我的回答中没有使用jquery（只是纯css），这可能会有所帮助。这就是rad。所以要停止它并开始它，你只需删除它。测试？这很好。如果它对你有帮助，那么表示感谢的一个好方法就是接受它作为答案；P@Carter是的，没错，我明白了，我的意思是如果我使用setInterval（）在2秒后移除类，它将像预期的那样工作，或者只是移除过渡无穷大，让关键帧变为0.5秒……它是双向工作的：）还有一个选项可以从.test中移除/玩转“无穷大”。将它们改为int值10，意味着它发生10次，然后完全停止运行！！我从你的回答中得到了我所需要的：）