时间戳

首页 > 解决方案 > Css动画：过渡不反向工作

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>

https://codepen.io/naveen444/pen/zYooJzd?editors=1100

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

标签： htmlcsscss-animationscss-transitions

解决方案

您可以做transform: scale(0.8) translateY(-60px);onhover而不是添加animation. 我已经更改了以下 css 并分叉了您的codepen。这是你想要的工作。

.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;
}

这里也是片段。

body {
  background: black;
}

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 span {
  font-size: 1rem;
  padding-left: 20px;
  color: orange;
  /*   transition: all 0.1s; */
  font-weight: 600;
  display: none;
}

.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <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>

</body>

推荐阅读