CODEWITHSUNDEEP
jquerycss
user3396590
user3396590

Reputation: 13

How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

I found an example of an infinite spinning div - How to trigger css3 rotate effect by clicking? and here it is on jsFiddle http://jsfiddle.net/yNT3L/ here is the code used on jsFiddle -

//css

    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px 50px 50px 50px;
}

#d2{
    background-color: green;
    -webkit-animation: spin 10s infinite linear;
}

.spinEffect{
    -webkit-animation: spin 0.5s 1 linear;
}

@-webkit-keyframes spin {
0%  {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}   
}

//jQuery

$(function(){
    $("a").click(function(){
        $("#d1").addClass(".spinEffect");
    });
});

it seems to be targeting the spin element of the -webkit and im just wondering how can i set the value of the spin element to 360 degrees and another div to -360 degrees?

Upvotes: 1

Views: 7081

Answers (2)

K K
K K

Reputation: 18099

You don't need jquery for that. Also spin is not a built in function or method of webkit.

Demo: http://jsfiddle.net/lotusgodkk/yNT3L/156/

CSS:

#d1 {
    background-color: green;
    -webkit-animation: antispin 10s infinite linear;
}
@-webkit-keyframes antispin {
0% {
    -webkit-transform: rotate(360deg);
}
100% {
    -webkit-transform: rotate(0deg);
}
}

You can study more about animation here :http://css-tricks.com/snippets/css/keyframe-animation-syntax/.

Upvotes: 0

Andrew Wilkinson
Andrew Wilkinson

Reputation: 10846

spin is a custom name for the keyframes specification, it's not built into webkit. All you need to do is create a new keyframes item with a different name, and refer to that.

#d3{
    background-color: blue;
    -webkit-animation: spinreverse 10s infinite linear;
}

@-webkit-keyframes spinreverse {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}   
}

I updated your jsfiddle as http://jsfiddle.net/yNT3L/157/

Upvotes: 3

Related Questions