Jquery and CSS Button toggle rotation animation

Question

I have a problem with my button. I want it to be toggle like. 1st click - rotate to predefined value. 2nd click - go to original value. Both need to be keyframed so the animation looks smooth and not just instant.

HTML

<center><a id="c_button" class="c_button"><i class="material-icons">settings</i></a><center>

CSS

.c_button{
background-color:#607D8B;
border-radius:50px;
padding: 15px;
display:inline-block;
color:#F5F5F5;
font-family:Roboto;
font-size:16px;
font-weight:bold;
width:24px;
text-decoration:none;
text-align: center;
line-height: 0px;
}.c_button:hover {
background-color:#56707D;
position:relative;
}.c_button:active {
position:relative;
top:1px;
}

/*used to create rotation animation*/
a.on {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);

-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
background-color:#56707D;
}
a.on:hover {
background-color:#607D8B;
}
a.on:active{
}

JS

$(document).ready(function () {
$('a#c_button').click(function () {
    $(this).toggleClass("on");
});
});

Here's a JSFiddle https://jsfiddle.net/csck5j3h/ I have the first toggle animation figured out. Can't seem to figure out the other one.

Answer 1

Is this what you're looking for?

-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all; 

Needs to be added to a , not a.on

 $('#c_button').click(function(){ $(this).find('a').toggleClass('on'); }); 

 .c_button { background-color:#607D8B; border-radius:50px; padding: 15px; display:inline-block; color:#F5F5F5; font-family:Roboto; font-size:16px; font-weight:bold; width:24px; text-decoration:none; text-align: center; line-height: 0px; } .c_button:hover { background-color:#56707D; position:relative; } .c_button:active { position:relative; top:1px; } /*used to create rotation animation for JS*/ a{ -webkit-transition: 200ms linear all; -moz-transition: 200ms linear all; -o-transition: 200ms linear all; transition: 200ms linear all; } a.on { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); background-color:#56707D; } a.on:hover { background-color:#607D8B; } a.on:active { } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="c_button"> <center><a id="c_button" class="c_button">A</a><center> </div> 

Answer 2

Add transition time your c_button css class like below

.c_button {
    background-color:#607D8B;
    border-radius:50px;
    padding: 15px;
    display:inline-block;
    color:#F5F5F5;
    font-family:Roboto;
    font-size:16px;
    font-weight:bold;
    width:24px;
    text-decoration:none;
    text-align: center;
    line-height: 0px;
    /*add transition time effect here*/
    -webkit-transition: 200ms linear all;
    -moz-transition: 200ms linear all;
    -o-transition: 200ms linear all;
     transition: 200ms linear all;
}

and use your jQuery as it is

$(document).ready(function () {
    $('a#c_button').click(function () {
        $(this).toggleClass("on");
    });
});

JSFiddle Demo

Answer 3

Just add :

a{
   -webkit-transition: 200ms linear all;
   -moz-transition: 200ms linear all;
   -o-transition: 200ms linear all;
   transition: 200ms linear all;
}

it allow you to have the transition whenever it isn't on