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样式内。 这意味着仅在更改为该类时才应用过渡，而在移除过渡时将不应用过渡。