CSS：转换一次转换，然后将其重置而不转换

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.