Поворот шрифта Awesome Icon On Click

Question

Я пытаюсь сделать шрифт Удивительный шеврон вращается на 180º по щелчку.

Вот скрипка JSFiddle, у которой есть то, что я пробовал до сих пор. Я также хотел, чтобы он вращался по центру, поэтому я использовал этот другой 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") ; 
}) 

Answer 1

Я считаю, что было бы проще сделать это с помощью CSS transitio нс:

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