CSS動畫，點擊時切換旋轉

Question

我嘗試讓插入符號在下面旋轉180度點擊我的下拉菜單。 在我試圖實現的解決方案中，它將插入符號的類更改為切換或在單擊時切換。 我第一次點擊它會向上旋轉，第二次它立即返回到它的起始位置然后再向上旋轉。 我聞到了臟代碼，最簡單的方法是添加這個切換旋轉動畫。 在此先感謝您的幫助。
繼承我現在的css：

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

Answer 1

對於這么簡單的事情，你真的不需要關鍵幀動畫。 如果您只是在點擊時向您的圖標添加一個類，然后將其刪除，這將應用您的輪換。 這是一個使用字體真棒和簡單旋轉的工作plunkr 。 這只是一個簡單的示例，您將需要使用供應商前綴並注意css轉換在舊版瀏覽器中不起作用。

<div id="container">
    <i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
}

(function(document){
  var div = document.getElementById('container');
  var icon = document.getElementById('icon');
  var open = false;

  div.addEventListener('click', function(){
    if(open){
      icon.className = 'fa fa-arrow-down';  
    } else{
      icon.className = 'fa fa-arrow-down open';
    }

    open = !open;
  });
})(document);

Answer 2

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
}

.toggle-up {
  transform: rotate(180deg);
}

.toggle-down {
  transform: rotate(0);
}

您應該有一個初始狀態才能完成動畫。

這是一個例子： codepen

UPDATE

這是不使用javascript： codepen的版本

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <div class="square toggle-down"></div>
</label>


#checkbox {
  display: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}

#checkbox:checked + .square {
  transform: rotate(180deg);
}

一般的想法是使用Adjacent兄弟選擇器和復選框選中狀態來更改塊類。