用抖动效果制作div动画

Question

说明:

我的风格div就像一个日历.现在,每当我使用日期更新该日历中的内容时,它就会出现在屏幕上.

现在我想尝试div使用如下摆动效果进行动画制作:

1)向左倾斜

2)向右倾斜

3)向左倾斜

4)等

到目前为止,我不确定我是否应该使用JQuery/css来制作这个动画.

如果有人能指出我正确的方向,我将非常感激!

Answer 1

这是我认为你正在寻找的jsfiddle:

这不使用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;
}