javascript - 自动从 -9 旋转到 9 度

Question

我目前有这段代码

-webkit-transition: 0.9s;
-webkit-transform: rotate(-9deg);
-moz-transition: 0.9s;
-moz-transform: rotate(-9deg);
-o-transition: 0.9s;
-o-transform: rotate(-9deg);
-ms-transition: 0.9s;
-ms-transform: rotate(-9deg);

我希望我的图像旋转到 -9，然后旋转到 9，然后一遍又一遍地重复。因此，只要有人在网站上，它就会从 -9 度旋转到 9 度

编辑:我被告知需要 JavaScript 来执行此操作，所以我现在正在寻找一些 JavaScript 来执行此操作。

谢谢

Answer 1

您可以使用 CSS animations 执行此操作, 取决于 how much compatibility你需要。

div {
    -webkit-animation-duration: 0.9s;
    -webkit-animation-name: ninetonine;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes ninetonine {
    from {
        -webkit-transform: rotate(9deg);
    }
    to {
        -webkit-transform: rotate(-9deg);
    }
}

See a demo here