javascript - 有没有办法抵消或延迟 li 动画？

Question

我想抵消动画，但它似乎在我的代码中不起作用，或者我只需要一个一个地做。如果是，那将很难，请帮助我。我为我的 li 使用了图标。我是初学者，请与我裸露，请原谅我的英语。我不会如何使用第一个孩子等。请有人教我。我很感激提前谢谢你。

这是代码：

.nav-item a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10;
  margin: 2px 0;
  width: 200px;
  display: flex;
  align-items: center;
  margin-left: -173px;
  transition: 0.2s ease;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}


li i {
  color: black;
  font-size: 27px;
  padding: 0;
  filter: grayscale(100%) opacity(0.3);
  width: 100%;
  text-align: right;
  transition: 0.2s ease;
  text-shadow: 1px 1px 3px #000000;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.navbar-nav li {
  animation: my-animation 300ms ease-out;
}

.navbar-nav li:nth-child(1) {
  animation-delay: 100ms;
}

.navbar-nav li:nth-child(2) {
  animation-delay: 200ms;
}

.navbar-nav li:nth-child(3) {
  animation-delay: 300ms;
}

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"></link>
  <script src="https://kit.fontawesome.com/5a479f40ed.js"></script>
<ul class="navbar-nav">
  
    <li class="nav-item"><a href="Index.php" id="<?php if($page=='home'){echo 'active';}?>">About<i class="far fa-user" id="<?php if($page=='home'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Resume.php" id="<?php if($page=='Resume'){echo 'active';}?>">Resume<i class="far fa-file" id="<?php if($page=='Resume'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Portfolio.php"id="<?php if($page=='Portfolio'){echo 'active';}?>">Portfolio<i class="fas fa-guitar" id="<?php if($page=='Portfolio'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Contact.php" id="<?php if($page=='Contact'){echo 'active';}?>">Contact<i class="far fa-address-card" id="<?php if($page=='Contact'){echo 'active';}?>"></i></a></li>   

标签： javascripthtmlcss

Answer 1

我重新组织了您的代码，但它缺少一些东西。

• .navbar-nav li动画说我的动画，但我将它更新为你的动画名称FadeIn。
• 我添加i了动画，.navbar-nav li:nth-child(1) i所以动画在那个元素上运行，而不是它的父元素。

可能还有其他一些事情，但你几乎就在那里。

.nav-item a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10;
  margin: 2px 0;
  width: 200px;
  display: flex;
  align-items: center;
  margin-left: -173px;
  transition: 0.2s ease;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}


li i {
  color: black;
  font-size: 27px;
  padding: 0;
  filter: grayscale(100%) opacity(0.3);
  width: 100%;
  text-align: right;
  transition: 0.2s ease;
  text-shadow: 1px 1px 3px #000000;
}

.navbar-nav li i {
  opacity: 0;
  animation: FadeIn 0.3s ease-out 0s forwards 1;
}

.navbar-nav li:nth-child(1) i {
  animation-delay: 100ms;
}

.navbar-nav li:nth-child(2) i {
  animation-delay: 200ms;
}

.navbar-nav li:nth-child(3) i {
  animation-delay: 300ms;
}
.navbar-nav li:nth-child(4) i {
  animation-delay: 400ms;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"></link>
  <script src="https://kit.fontawesome.com/5a479f40ed.js"></script>
<ul class="navbar-nav">
  
    <li class="nav-item"><a href="Index.php" id="<?php if($page=='home'){echo 'active';}?>">About<i class="far fa-user" id="<?php if($page=='home'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Resume.php" id="<?php if($page=='Resume'){echo 'active';}?>">Resume<i class="far fa-file" id="<?php if($page=='Resume'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Portfolio.php"id="<?php if($page=='Portfolio'){echo 'active';}?>">Portfolio<i class="fas fa-guitar" id="<?php if($page=='Portfolio'){echo 'active';}?>"></i></a></li>
    <li class="nav-item"><a href="Contact.php" id="<?php if($page=='Contact'){echo 'active';}?>">Contact<i class="far fa-address-card" id="<?php if($page=='Contact'){echo 'active';}?>"></i></a></li>