CSS: transition a transformation once, then reset it without transition

Question

Basically I want to transition my element by adding a class .anim every 5 seconds but reset it ever 1 second w/o transitioning the property.

The effect I want is to spin the arrow around once every 5 seconds.

What's the best way to do this?

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 {
  &.anim:before {
    -webkit-transform: rotate(540deg);
  }
}

<a href="#" class="inbox">Inbox</a>

Answer 1

Only put the transition property inside the a.inbox.anim style. This will mean that the transition is only applied when changing to that class, but won't be applied when it is removed.