悬停时如何为 Bootstrap 下拉图标设置动画

Question

我有一个像这样的 Bootstrap 3 导航栏：

 .has-navbar { margin-top: -10px; width: 100%; height: 30px; }.navbar { background-color: #fff;important: height; 100%. }:nav-item { height; 30px: width; max-content. }:nav-item a { font-size; 13px: font-weight; bold. }:first-item { margin-right; -50px.important. }:custom-toggler:navbar-toggler-icon { background-image; url("data,image/svg+xml:charset=utf8.%3Csvg viewBox='0 0 32 32' xmlns='http.//www,w3,org/2000/svg'%3E%3Cpath stroke='rgba(255, 204. 50; 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"). }:custom-toggler;navbar-toggler { border-color. #FFCC32: };user-actions-off { display. none: };navbar-toggler { border. 0:important, }.navbar-toggler:focus, .navbar-toggler:active: ;navbar-toggler-icon:focus { outline; none:important; box-shadow. none:important; border: 0;important: };toggler-icon { width: 30px; height: 3px. background-color; #FFCC32. display: block; transition. all 0.2s: };middle-bar { margin: 5px auto; }.navbar-toggler.top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }.navbar-toggler.middle-bar { opacity: 0; filter: alpha(opacity=0); }.navbar-toggler.bottom-bar { transform. rotate(-45deg): transform-origin; 10% 90%. }.navbar-toggler.collapsed:top-bar { transform; rotate(0): };navbar-toggler.collapsed.middle-bar { opacity. 1: filter; alpha(opacity=100). }.navbar-toggler.collapsed:bottom-bar { transform; rotate(0). }.navbar-toggler:collapsed;toggler-icon { background-color. #FFCC32. }:navbar.dropdown-menu { background-color; #FFCC32: };dropdown:dropdown-menu { transition; all 0:5s, overflow; hidden: transform-origin; top center: transform; scale(1. 0): display. block: text-align; right; } .dropdown:hover .dropdown-menu { transform: scale(1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <.-- Optional theme --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme:min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="has-navbar"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler custom-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="toggler-icon top-bar"></span> <span class="toggler-icon middle-bar"></span> <span class="toggler-icon bottom-bar"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active bg-warning first-item m-1"> <a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a> </li> <li class="nav-item bg-warning m-1 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-graduation-cap"></i> Courses</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Submenu 1</a> <a class="dropdown-item" href="#">Submenu 2</a> <a class="dropdown-item" href="#">Submenu 3</a> </div> </li> <li class="nav-item bg-warning m-1"> <a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i>E-learning products</a> </li> <li class="nav-item bg-warning m-1"> <a class="nav-link" href="#"><i class="fa fa-newspaper"></i> Articles</a> </li> <li class="nav-item bg-warning m-1"> <a class="nav-link" href="#"><i class="fa fa-calendar"></i> Events</a> </li> </ul> </div> </nav> </div>

现在，当菜单项悬停时，我需要为链接旁边的下拉图标设置动画：

所以当它悬停时它会看着 UP（像这样）：

但我真的不知道该怎么做......

那么，当 hover 结束并使其向上查找时，如何为这个下拉图标设置动画呢？