Элемент CSS неожиданно появляется после анимации CSS

Question

Я пытаюсь получить заголовок, чтобы исчезнуть, и go вверх при прокрутке вниз, а затем при прокрутке назад к началу заголовок появляется снова. Я пытаюсь вызвать @keyframes, добавляя и удаляя классы к элементу title при прокрутке мимо определенного количества пикселей. Мне удалось заставить это работать, однако, когда я прокручиваю вниз, заголовок исчезает и go исчезает, но затем снова появляется в той же позиции, с которой он начал. Я попытался добавить display: none к анимации css, но это ничего не делает.

$(document).scroll(function() {
  if ($(document).scrollTop() > 20) {

    $("#photo-container h1").removeClass("animate");
    setTimeout(function() {
      $("#photo-container h1").addClass("animate-out")
    }, 1);

    $("#menu ul").removeClass("animate2");
    setTimeout(function() {
      $("#menu ul").addClass("animate-out2");
    }, 1);

    //$("#menu li").hide();

  } else if ($(document).scrollTop() < 20) {
    $("#photo-container h1").removeClass("animate-out");
    setTimeout(function() {
      $("#photo-container h1").addClass("animate");
    }, 1);

    $("#menu ul").removeClass("animate-out2")
    setTimeout(function() {
      $("#menu ul").addClass("animate2");
    }, 1);
  }
})

body { height: 1000px; }
#photo-container h1 {
  color: orange;
  letter-spacing: 2.5px;
  font-size: 40;
  text-align: center;
  padding-top: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  transition: all 2s;
}

@keyframes example {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

#menu li {
  display: inline;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 25;
  animation-name: example2;
  animation-duration: 2s;
}

@keyframes example2 {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.animate {
  animation-name: example;
  animation-duration: 2s;
}

.animate2 {
  animation-name: example2;
  animation-duration: 3s;
}

.animate-out2 {
  animation-name: example2;
  animation-direction: reverse;
  animation-duration: 3s;
}

.animate-out {
  animation-name: example;
  animation-direction: reverse;
  animation-duration: 3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="photo-container">
  <h1 class="animate">Matt Haywood</h1>
  <div id="menu">
    <ul class="animate2">
      <li><a class="link" id="blog_button" href="#blog">About</a></li>
      <li><a class="link" id="projects_button" href="#projects">Projects</a></li>
      <li><a class="link" id="photography_button" href="#photography">Photography</a></li>
      <li><a class="link" id="sites_button" href="#sites">Sites</a></li>
      <li><a class="link" id="uni_button" href="#uni">Uni Work</a></li>
      <li><a class="link" id="contact_button" href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

Answer 1

добавить animation-fill-mode: forwards к

Позволить элементу сохранить значения стиля из последнего ключевого кадра после завершения анимации.

source

$(document).scroll(function() {
  if ($(document).scrollTop() > 20) {


    $("#photo-container h1").removeClass("animate");
    setTimeout(function() {
      $("#photo-container h1").addClass("animate-out")
    }, 1);

    $("#menu ul").removeClass("animate2");
    setTimeout(function() {
      $("#menu ul").addClass("animate-out2");
    }, 1);

    //$("#menu li").hide();

  } else if ($(document).scrollTop() < 20) {
    $("#photo-container h1").removeClass("animate-out");
    setTimeout(function() {
      $("#photo-container h1").addClass("animate");
    }, 1);

    $("#menu ul").removeClass("animate-out2")
    setTimeout(function() {
      $("#menu ul").addClass("animate2");
    }, 1);
  }
})

body {
  height: 1000px;
}
#photo-container h1 {
  color: orange;
  letter-spacing: 2.5px;
  font-size: 40;
  text-align: center;
  padding-top: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  transition: all 2s;
}

@keyframes example {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

#menu li {
  display: inline;
  margin-left: 2%;
  margin-right: 2%;
  font-size: 25;
  animation-name: example2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes example2 {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.animate {
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.animate2 {
  animation-name: example2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.animate-out2 {
  animation-name: example2;
  animation-direction: reverse;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.animate-out {
  animation-name: example;
  animation-direction: reverse;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="photo-container">
  <h1 class="animate">Matt Haywood</h1>
  <div id="menu">
    <ul class="animate2">
      <li><a class="link" id="blog_button" href="#blog">About</a></li>
      <li><a class="link" id="projects_button" href="#projects">Projects</a></li>
      <li><a class="link" id="photography_button" href="#photography">Photography</a></li>
      <li><a class="link" id="sites_button" href="#sites">Sites</a></li>
      <li><a class="link" id="uni_button" href="#uni">Uni Work</a></li>
      <li><a class="link" id="contact_button" href="#contact">Contact</a></li>
    </ul>
  </div>
</div>