CSS：轉換一次轉換，然后將其重置而不轉換

Question

基本上，我想通過每5秒添加一個類.anim來轉換元素，但是每1秒鍾重置一次，而.anim轉換屬性。

我想要的效果是每5秒旋轉一次箭頭。

最好的方法是什么？

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

只將transition屬性放在a.inbox.anim樣式內。 這意味着僅在更改為該類時才應用過渡，而在移除過渡時將不應用過渡。