css - CSS：转换一次转换，然后在没有转换的情况下重置它

Question

基本上，我想通过.anim每 5 秒添加一个类来转换我的元素，但每 1 秒重置一次，而无需转换属性。

我想要的效果是每 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样式内。这将意味着仅在更改为该类时才应用过渡，但在删除时不会应用。