css - CSS: 変換を 1 回トランジションし、トランジションなしでリセットする

Question

基本的に、5秒ごとにクラスを追加して要素を遷移させたいのですが.anim、プロパティを遷移させずに1秒ごとにリセットします。

私が望む効果は、矢印を 5 秒ごとに 1 回回転させることです。

これを行う最善の方法は何ですか？

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>