title: CSS: transition a transformation once, then reset it without transition
body: <p>Basically I want to transition my element by adding a class <code>.anim</code> every 5 seconds but reset it ever 1 second w/o transitioning the property.</p>
  
  <p>The effect I want is to spin the arrow around once every 5 seconds.</p>
  
  <p>What's the best way to do this?</p>
  
  <pre><code>setInterval(function(){
      var $el = $("a.inbox");
  
      $el.addClass('anim');
      setTimeout(function(){
          $el.removeClass('anim');
      }, 1000);
      console.log($el);
  }, 5000);
  
  a.inbox:before {
    content: '⇧';
    display: inline-block;
    position: relative;
    -webkit-transform: rotate(180deg);
    margin-left: 5px;
  
    transition: -webkit-transform 1s;
  }
  
  a.inbox {
    &amp;.anim:before {
      -webkit-transform: rotate(540deg);
    }
  }
  
  &lt;a href="#" class="inbox"&gt;Inbox&lt;/a&gt;
  </code></pre>