javascript - How to trigger css3 rotate effect by clicking? -

I have two divs, the effect of rotating one is applied and the second triggers the click.

  $ (function () {$ ("a"). Click (function () {$ ("# D1"). AddClass (". Spinfif");});});   
  # d1, # ​​d2 {width: 100px; Height: 100 pixels; Background color: red; Margin: 50px 50px 50px 50px; } # D2 {background color: green; Webkit-Animation: Spin 10 S Infinite Linear; }. Spinfetch {-bbkit-animation: spin 0.5 s1 linear; } @ -webkit-keyframe spin {0% {-webkit-transform: rotate (0deg); } 100% {-webkit-transform: rotate (360deg); }}   
  & lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> & Lt; Div id = "d1" & gt; & Lt; / Div & gt; & Lt; Div id = "d2" & gt; & Lt; / Div & gt; & Lt; A href = # & gt; Click me & lt; / A & gt; I know that the problem should be in JS, can someone ask me to modify it?  
 When I delete , then it is working.   
 But when I click the link, it works only once, how can I make an error with my  addClass ?   
 
 
 You should add  $ ("# d1"). AddClass ("spinEffect");  and not "SpinFeet", .  is useless here;)  
 For your second question, just add  infinity  to your CSS. Spinfeet {-webkit-animation: spin 0.5s infinite linear; }   Edit     
 If you click on the button, then every time you want to turn the box on You can find the following method  
  $ (function () {$ ("a"). Click (function () {var $ d1 = $ ("# d1"); // slightly customizable because we will use it more than $ d1.removeClass ("spinEffect"); setTimeout (function () {$ d1.addClass ("spinEffect")}, 0);});});   
 You can ask why  setTimeout  is because otherwise, the class is re-connected to trigger the effect of CSS;)