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;
}

Answer 2

我会通过在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 */
}

用抖动效果制作div动画

2 个答案: