Html Css动画：过渡不在反向工作

我正在尝试使用HTML/CSS制作这个侧导航栏，我在其中添加了一些悬停动画。每当您将鼠标悬停在图标上时，它将缩放为两倍，导航栏中的其余项目将分散。但我的问题并不是因为我已经用javascript和CSS实现了动画。问题是动画在反向方向上运行不平稳。所以我尝试添加短CSS动画，以检查反向动画转换是否正常工作

以下是我的CSS代码：

ul{
    list-style: none;
    }
    .navmenu{
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
    }
    .navmenu ul{
      padding-left: 40px;
      position: relative;
    }
    .navmenu ul li {
      padding: 15px 0;
    }
    .navmenu ul li a{
      text-decoration: none;
      position: relative;
      font-size: 1.8rem;
      font-weight: 900;
    }
    .navmenu ul li a i{
      -webkit-transition: all 2s ease-in;
              transition: all 2s ease-in;
    }
    .navmenu ul li a:hover i{
      -webkit-animation: slide-out-top 0.2s ease-out both;
              animation: slide-out-top 0.2s ease-out both;
      color: orange;
    }

    @-webkit-keyframes slide-out-top {
      0% {
        -webkit-transform: scale(1) translateY(0);
                transform: scale(1) translateY(0);
      }
      100% {
        -webkit-transform: scale(0.8,0.8) translateY(-60px);
                transform: scale(0.8,0.8) translateY(-60px);
      }
    }
    @keyframes slide-out-top {
      0% {
        -webkit-transform: scale(1) translateY(0);
                transform: scale(1) translateY(0);
      }
      100% {
        -webkit-transform: scale(0.8,0.8) translateY(-60px);
                transform: scale(0.8,0.8) translateY(-60px);
      }
    }

以下是它的HTML代码：

<nav class="navmenu">
    <ul>
      <li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
      <li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
      <li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
      <li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
      <li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a> 
      </li>
      <li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a> 
      </li>
    </ul>
</nav>

---

我在互联网上读到动画和转场是不同的，转场可以反转，但不是动画，但我以前使用过CSS动画，我记得转场：所有2；可以平滑地反转所有过渡。如果我说错了什么，请原谅。我是这方面的绝对初学者，请纠正我。

你可以做

变换：缩放（0.8）translateY（-60px）在
上悬停
而不是添加
动画
。我改变了以下css，并分叉了您的。这是你想要的

.navmenu ul li a i{
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}
.navmenu ul li a:hover i{
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

下面是代码片段


正文{
背景：黑色；
}
保险商实验室{
列表样式：无；
}
.导航菜单{
位置：固定；
最高：50%；
转化：translateY（-50%）；
}
navmenu.ul{
左侧填充：40px；
位置：相对位置；
}
李先生{
填充：15px0；
}
Navul li a.先生{
文字装饰：无；
位置：相对位置；
字体大小：1.8rem；
字号：900；
}
Navul li先生{
字号：1rem；
左侧填充：20px；
颜色：橙色；
/*过渡：所有0.1秒*/
字号：600；
显示：无；
}
Navul li a i.先生{
位置：相对位置；
-webkit转换：-webkit转换1s；
转变：转变1s；
颜色：橙色；
}
.Navul li a:悬停i{
-webkit转换：缩放（0.8）translateY（-60px）；
变换：比例（0.8）translateY（-60px）；
颜色：橙色；
}









这些不是经典的过渡，而是关键帧动画。使用纯CSS，您可以做到这一点


.intern{
-webkit动画：1s；
}
实习医生：悬停{
-webkit动画：输出1s；
}
@-中的webkit关键帧{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@-webkit关键帧输出{
0%{-webkit变换：旋转（360度）；}
100%{-webkit变换：旋转（0度）；}
}
您可以使用类样式定义前后状态，并使用事件侦听器添加/删除这些类。一个状态将有一个mouseover侦听器，而另一个状态将有一个mouseleave侦听器。然后需要使用css定义前后状态。然后将@keyframes规则添加到这些特定类中

例如，您有一个设置元素样式的类，我们可以将其称为before状态
#icon
。然后您有一个类，它将是悬停状态
slidein。将此样式设置为动画完成过渡时希望状态的外观。在该特定类的
@keyframes
规则中设置动画参数。然后为mouseout状态设置另一个类，该类有一个特定的样式，用于在元素返回到原始状态后的外观。根据mouseover中的元素状态添加
@keyframes
规则。最后，使用
setTimeout
删除与动画计时持续时间一致的mouseout状态class

我在父元素上添加了一个黄色背景，以说明悬停触发eventlistener和动画元素之间的关系


const icon=document.queryselectoral（'.icon'））
常量动画=（el，持续时间）=>{
const root=document.documentElement；
//将CSS变量设置为函数中调用的持续时间的条件
//使用css:root元素，检查持续时间是否超过1秒，然后
//相应地将根变量的格式设置为秒/毫秒
如果（`${duration}`.length>3）{
设整型=`${duration}`.slice（0，`${duration}`.length-3）；
setProperty（'--duration'，`${whole}s`）；
}否则{
setProperty（'--duration'，`.${duration}s`）；
}
el.forEach（（节点）=>{
node.addEventListener（'mouseenter'，（e）=>{
node.children[0].classList.add（'slidein'）；
})
node.addEventListener（'mouseleave'，（e）=>{
node.children[0].classList.add（'slideout'）；
node.children[0].classList.remove（'slidein'）；
设置超时（（）=>{
node.children[0]。classList.remove（'slideout'）
}，持续时间）
})
})
console.log（根目录）
}
制作动画（图标，650）
：根目录{
--顶部位置：-30px；
--持续时间：0.7s；
--缩放比例：缩放比例（0.6）
}
#母公司{
边缘顶部：30px；
高度：50px；
宽度：50px；
}
.图标img{
宽度：50px；
高度：50px；
}
.图标{
利润率：10px0；
背景：黄色；
}
斯莱丹先生{
动画：slideinvar（--duration）缓解；
位置：相对位置；
顶部：var（--顶部位置）；
转换：var（--缩放到）；
}
.滑出{
动画：滑出变量（--持续时间）释放；
位置：相对位置；
转换：var（--缩放到）；
顶部：0px；
}
@关键帧幻灯片{
0% {
顶部：0px；
变换：比例（1）；
}
100% {
顶部：var（--顶部位置）；
转换：var（--缩放到）；
}
}
@关键帧滑出{
0% {
顶部：var（--顶部位置）；
转换：var（--缩放到）；
}
100% {
顶部：0px；
变换：比例（1）；
}
}
您能检查下面的代码链接吗？霍