Question

I currently have this code

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

I would like it so that my image will rotate to -9 and then to 9 and then repeat itself over and over again. So that the whole time someone is on the site it will just rotate from -9 degress to 9 degress

Edit: I have been told that JavaScript is needed to do this, so I am now looking for some JavaScript to do this.

Thanks

Answer 1

You can do this with CSS animations, depending on how much compatibility you need.

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