具有淡入下拉效果的 Angular 和 CSS 动画

Question

我正在为自己开发一个投资组合网站，但我的 css 动画不断出现这种我不感兴趣的奇怪行为。在我看来，当有人访问我的网站时，标题链接应该如何工作从顶部淡入。一旦它们淡入到位，如果我将鼠标光标悬停在链接上，它应该播放一个脉动到淡入淡出的动画，并且只要鼠标光标在链接上，它就会重复。所有这些都可以正常工作。

当我尝试从顶部动画延迟淡入的初始动画时问题就出现了位置，一秒钟后第二个链接下降并淡入，然后两秒钟后第三个链接下降并淡入。如果我延迟动画，我会失去下拉效果，只有淡入效果播放。

这是所有三个链接都淡入并下降到位的 sn-p。

.myNav{
    height: 64px;
    background-color: #4b5778;
    text-align: center;
    
}

.navItem{
    margin: 18px 0px 0px 35px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    /* color: white; */
    /* color: rgb(182, 181, 181); */
    color: greenyellow;
    /* transform: scale(1.00);
    transition: transform 1s; */
}

.fade-in-text{
    animation: fadeIn ease-out 1s;
    -webkit-animation: fadeIn ease-out 1s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;
}

.navItem:hover{
    /* transform: scale(1.33);
    transition: transform 1s; */
    animation: pulsate-in 1.2s ease-out infinite;
    /* color: white; */
    color: rgb(222, 255, 173);
}

/* pulsating text animation */
@keyframes pulsate-in {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        opacity: 0.50;
    }
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* fading text animation */
@keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Mozilla */
@-moz-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}
 
/* Safari and Chrome */
@-webkit-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Opera */
@-o-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text navItem myResume">Resume</li>
    </ul>
</nav>

如果我尝试做动画延迟以获得“级联”效果，这是播放动画的 sn-p。

.myNav{
    height: 64px;
    background-color: #4b5778;
    text-align: center;
    
}

.navItem{
    margin: 18px 0px 0px 35px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    /* color: white; */
    /* color: rgb(182, 181, 181); */
    color: greenyellow;
    /* transform: scale(1.00);
    transition: transform 1s; */
}

.fade-in-text{
    animation: fadeIn ease-out 1s;
    -webkit-animation: fadeIn ease-out 1s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;
}

.fade-in-text-two{
    animation: fadeIn ease-out 1s 2s;
    -webkit-animation: fadeIn ease-out 1s 2s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;
}

.fade-in-text-three{
    animation: fadeIn ease-out 1s 3s;
    -webkit-animation: fadeIn ease-out 1s 3s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;
}

.navItem:hover{
    /* transform: scale(1.33);
    transition: transform 1s; */
    animation: pulsate-in 1.2s ease-out infinite;
    /* color: white; */
    color: rgb(222, 255, 173);
}

/* pulsating text animation */
@keyframes pulsate-in {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        opacity: 0.50;
    }
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

/* fading text animation */
@keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Mozilla */
@-moz-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}
 
/* Safari and Chrome */
@-webkit-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Opera */
@-o-keyframes fadeIn{
    0% {opacity: 0; margin: 0px 0px 0px 35px;}
    100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text-two navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text-three navItem myResume">Resume</li>
    </ul>
</nav>

我尝试使用第 n 个类型来单独选择每个列表元素，然后尝试为每个元素分配一个类（如代码所示）。不知道为什么我不断得到这种行为。我在 Angular 上运行它。我最后的手段是在使用 TypeScript 延迟后将类“注入”到每个元素中，但如果可能的话，我宁愿以正确的方式使用 css 完成它。提前致谢！

Answer 1

这就是你要找的吗？

为您的项目提供动画值，然后将forwards 添加到您的动画中。

.fade-in-text{
  opacity: 0;
  margin: 0px 0px 0px 35px;
  animation: fadeIn ease-out 1s forwards;
}

然后您可以使用:nth-of-type(n) 来延迟动画。

 .fade-in-text:nth-of-type(2) {
      animation-delay: .2s;
  }

 .fade-in-text:nth-of-type(3) {
      animation-delay: .3s;
  }

.myNav{
  height: 64px;
  background-color: #4b5778;
  text-align: center;

}

.navItem{
  margin: 18px 0px 0px 35px;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  /* color: white; */
  /* color: rgb(182, 181, 181); */
  color: greenyellow;
  /* transform: scale(1.00);
  transition: transform 1s; */
}

.fade-in-text{
 opacity: 0;
  margin: 0px 0px 0px 35px;
  animation: fadeIn ease-out 1s forwards;
  -webkit-animation: fadeIn ease-out 1s forwards;
  -moz-animation: fadeIn ease-out 1s forwards;
  -o-animation: fadeIn ease-out 1s forwards;
  -ms-animation: fadeIn ease-out 1s forwards;
}

.fade-in-text:nth-of-type(2) {
  animation-delay: .2s;
}

.fade-in-text:nth-of-type(3) {
  animation-delay: .3s;
}

.navItem:hover{
  /* transform: scale(1.33);
  transition: transform 1s; */
  animation: pulsate-in 1.2s ease-out infinite;
  /* color: white; */
  color: rgb(222, 255, 173);
}

/* pulsating text animation */
@keyframes pulsate-in {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      opacity: 0.50;
  }
  100% {
      transform: scale(1.25);
      opacity: 0;
  }
}

/* fading text animation */
@keyframes fadeIn{
  0% {opacity: 0; margin: 0px 0px 0px 35px;}
  100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Mozilla */
@-moz-keyframes fadeIn{
  0% {opacity: 0; margin: 0px 0px 0px 35px;}
  100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Safari and Chrome */
@-webkit-keyframes fadeIn{
  0% {opacity: 0; margin: 0px 0px 0px 35px;}
  100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

/* Opera */
@-o-keyframes fadeIn{
  0% {opacity: 0; margin: 0px 0px 0px 35px;}
  100% {opacity: 1; margin: 18px 0px 0px 35px;}
}

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text navItem myResume">Resume</li>
    </ul>
</nav>

Answer 2

问题似乎是您正在尝试为边距设置动画，当您增加第一个元素的边距时，它也会影响其他元素并且它们变得可见。

我已经使用position: relative 和top 修复了这个问题，以便它们单独掉落（这样一个元素的属性变化不会影响另一个元素）：

.myNav {
  height: 64px;
  background-color: #4b5778;
  text-align: center;
}

.navItem {
  position: relative;
  margin: 18px 0px 0px 35px;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  /* color: white; */
  /* color: rgb(182, 181, 181); */
  color: greenyellow;
  /* transform: scale(1.00);
    transition: transform 1s; */
}

.fade-in-text {
  animation: fadeIn ease-out 1s;
}

.fade-in-text-two {
  animation: fadeIn ease-out 1.5s;
}

.fade-in-text-three {
  animation: fadeIn ease-out 2s;
}

.navItem:hover {
  animation: pulsate-in 1.2s ease-out infinite;
  color: rgb(222, 255, 173);
}


/* fading text animation */

@keyframes fadeIn {
  0% {
    opacity: 0;
    top: -40px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}


/* pulsating text animation */

@keyframes pulsate-in {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.50;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

<nav class="myNav">
  <ul id="menu">
    <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
    <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
    <li (click)="scroll(projects)" #projects class="fade-in-text-two navItem myProjects">Projects</li>
    <li (click)="scroll(resume)" #resume class="fade-in-text-three navItem myResume">Resume</li>
  </ul>
</nav>