如何动画:: after content？

Question

在下面的代码中，我试图将动画（旋转）应用于我的::after内容，但展示了多种行为。

• 在我的local browser
中旋转但闪烁所有其他内容（在旋转期间）

• 它没有使用code snippet

  我该如何解决？

我试图通过输入@ -webkit，@ - moz，@ - o来为所有浏览器提供动画支持，但这对我没有帮助。

＆＃13;

＆＃13;

var e = document.getElementsByClassName("nav-bar");
for(i = 0;i < e.length; i++){
    e[i].addEventListener("click",function(elem){
       var el = elem.currentTarget;
            var value= el.id;
            var title_total_length = value.length;
            var const_length = "-navbar".length;
            var title_length = title_total_length - const_length;
            var current_menu_title = value.substring(0,title_length);
           if(document.getElementById(current_menu_title).className === "ttl ttl-clck"){
              document.getElementById(current_menu_title).classList.remove("ttl-clck"); 
             alert("if");
           }else{
               document.getElementById(current_menu_title).classList.add("ttl-clck");
             alert("else");
           }
    });
}

＆＃13;

ul,li{
  list-style:none;
  }
.nav-bar > ul{
  display:none;
  }
.ttl::after{
  
    font-weight: 800;
    content: "\203A";
    font-size: 25px;
    margin-top: -10px;
    /*transition:linear .5s;*/
    color:black;
     animation: spin .5s linear 1; 
  }
.ttl{
  cursor:pointer;
  }
.ttl-clck::after{
 /* transition:linear .5s; 
  transform: rotate(90deg);*/
  color:green;
   animation: spin .5s linear 1; 
}

@-webkit-keyframes spin{
    0%{
     transform: rotate(0deg);   
    }
     50%{
      transform: rotate(45deg);  
    }
     100%{
       transform: rotate(90deg); 
    }
}
@-moz-keyframes spin{
    0%{
     transform: rotate(0deg);   
    }
     50%{
      transform: rotate(45deg);  
    }
     100%{
       transform: rotate(90deg); 
    }
}
@-o-keyframes spin{
    0%{
     transform: rotate(0deg);   
    }
     50%{
      transform: rotate(45deg);  
    }
     100%{
       transform: rotate(90deg); 
    }
}



@keyframes spin{
    0%{
     transform: rotate(0deg);   
    }
     50%{
      transform: rotate(45deg);  
    }
     100%{
       transform: rotate(90deg); 
    }
}

＆＃13;

<ul>
  <li id="title1-navbar" class="nav-bar">
    <a>
      <span id="title1" class="ttl">menu-title1
      </span>
    </a>
      <ul>
        <li>sub-item</li>
        <li>sub-item</li>
        <li>sub-item</li>
      </ul>
   </li>
  <li id="title1-navbar" class="nav-bar">
    <a>
      <span id="title1" class="ttl">menu-title2
      </span>
    </a>
      <ul>
        <li>sub-item</li>
        <li>sub-item</li>
        <li>sub-item</li>
      </ul>
   </li>
   <li id="title1-navbar" class="nav-bar">
    <a>
      <span id="title1" class="ttl">menu-title3
      </span>
    </a>
      <ul>
        <li>sub-item</li>
        <li>sub-item</li>
        <li>sub-item</li>
      </ul>
   </li>

＆＃13;

＆＃13;

＆＃13;