CSS3/Jquery 自动旋转动画答案

【问题标题】：CSS3/Jquery auto rotate animationCSS3/Jquery 自动旋转动画
【发布时间】：2013-03-31 04:26:09
【问题描述】：

这里是 JS 小提琴链接： http://jsfiddle.net/asif097/Vq8bp/

和 CSS：

.hanging-div {
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    transform-origin:0% 0%;
    -moz-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -o-transform-origin:0% 0%;
}

.hanging-div:hover {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -o-transform:rotate(30deg);
}

悬停和悬停时 div 动画。我希望它保持连续动画（有点类似于钟摆）。我怎样才能做到这一点？

注意有没有办法用 jquery 实现相同的动画？

【问题讨论】：

如果使用 jQuery UI，您必须能够使用 switchClass() 进行动画处理。实现 CSS 动画的一种非常简单的方法:)
你能写个简短的吗？我理解了 switchClass()，但是如何实现呢？ @PENDO
这就像创建 2 个类并为第一个动画制作动画一样简单，第二个动画完成，依此类推
@PENDO 哦，明白了。谢谢。

标签： jquery css animation

【解决方案1】：

为什么不简单地使用 CSS @keyframes 来创建具有无限 animation-iteration-count 的动画：

@-moz-keyframes pendulum {
    50% {
        -moz-transform:rotate(30deg);
    }
}

@-ms-keyframes pendulum {
    50% {
        -ms-transform:rotate(30deg);
    }
}

@-o-keyframes pendulum {
    50% {
        -o-transform:rotate(30deg);
    }
}

@-webkit-keyframes pendulum {
    50% {
        -webkit-transform:rotate(30deg);
    }
}

@keyframes pendulum {
    50% {
        transform:rotate(30deg);
    }
}

.hanging-div {
    font-weight:600;
    text-align:center;
    color:#fff;
    margin:0 auto;
    display:block;
    width:200px;
    padding:50px 0;
    background:#f00;
    -moz-animation: pendulum;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 2s;
    -moz-transform-origin: top left;
    -ms-animation: pendulum;
    -ms-animation-iteration-count: infinite;
    -ms-animation-duration: 2s;
    -ms-transform-origin: top left;
    -o-animation: pendulum;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 2s;
    -o-transform-origin: top left;
    -webkit-animation: pendulum;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -webkit-transform-origin: top left;
    animation: pendulum;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transform-origin: top left;
}

JS Fiddle demo.

【讨论】：

这很有帮助，有没有办法用 jquery 获得相同的效果？如果有那怎么办？谢谢。