javascript - Rotate Font Awesome Icon On Click

Question

I'm trying to make a Font Awesome chevron rotate 180o on click.

Here's the fiddle of JSFiddle that has what I've tried so far. I also wanted it to spin around the center so I used this other thread.

(HTML)

<div class="fa fa-chevron-up"><a href="#">^</a></div> (CSS) .rotate { -webkit-animation: spin1 2s linear; -moz-animation: spin1 2s linear; -o-animation: spin1 2s linear; -ms-animation: spin1 2s linear; animation: spin1 2s linear; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; width: 256px; height: 256px; } @-webkit-keyframes spin1 { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(180deg);} } @-moz-keyframes spin1 { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(180deg);} } @-o-keyframes spin1 { 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(180deg);} } @-ms-keyframes spin1 { 0% { -ms-transform: rotate(0deg);} 100% { -ms-transform: rotate(180deg);} } @-keyframes spin1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg);} } (JS) $(".fa-chevron-up").click(function(){ $(this).toggleClass("rotate") ; }) question from:https://stackoverflow.com/questions/26173376/rotate-font-awesome-icon-on-click

Answer 1

I believe it would be easier to do this with CSS transitions:

CSS

.rotate{
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

.rotate.down{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery

$(".rotate").click(function(){
    $(this).toggleClass("down"); 
});

Demo fiddle