when I click twice css3 transform is not working
<p>I want the square rotation when I click the start button.but:</p>

<p>when I click once ,it is working. when I run twice ,this css3 effect is not working.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
      
 var $obj=$(".red");
 
 $("#btnStart").on("click",function(){
  $obj.removeClass("run").addClass("run");
 });
   
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{padding:100px;}

.red{background:#f00;width:100px;height: 100px;}

.run{
 transform:rotate(3600deg);
 transition: transform 5s ease 0s;
 -moz-transition:transform 5s ease 0s;
 -webkit-transition:transform 5s ease 0s;
 -o-transition:transform 5s ease 0s;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
 &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
&lt;body&gt;
 &lt;div class="red"&gt;&lt;/div&gt;
 
 &lt;br/&gt;
 
 &lt;button id="btnStart"&gt;
  开始旋转
 &lt;/button&gt;
 
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>