我試圖讓下面的插入符號旋轉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);
  }
}

對于這么簡單的東西，你真的不需要關鍵幀動畫。如果你只是在你的圖標上添加一個類，然后點擊移除它，這將應用你的旋轉。這是一個使用字體awesome和簡單旋轉的工作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);

為了完成動畫，您應該有一個初始狀態。

下面是一個例子:codepen

更新

下面是不使用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);
}

總體思路是使用相鄰的同級選擇器和復選框選中狀態來更改塊類。

用bootstrap實現的簡單方法

.caret {
    transition: 0.5s;
}
  .caret:not(.collapsed){
    transform: rotate(180deg);
  }
  .caret:is(.collapsed) {
    transform: rotate(0deg);
  }

<link  rel="stylesheet"/>
<link  rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>


<div class="d-flex">
  <span class="bi bi-chevron-down caret collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#detail"></span>
  <div id="detail" class="collapse">
    Hi!
  </div>
</div>