Intersection Observer 工作，元素淡入后消失

Question

第一次在这里发帖，希望能在我工作的时候得到一些帮助并结识一些很棒的朋友！

因此，我正在处理我的个人作品集，以使其至少可以在线发布以供求职，但遗憾的是遇到了一些问题。

布局是一个单一的页面组合，我想让我的背景图像上的元素在你滚动时淡入，我已经完成了。 但是，在它们完全淡入之后，它们立即消失了。

其他人遇到过这个问题吗？ 我是否需要为我的 CSS 添加一个可能的淡出选项，以应对我的元素不断消失的行为，这些元素被分割开来，继续拉动我？

我也在使用 Bootstrap ！！！！！

代码贴在下面：CSS

h1 {
  font-size: 4rem;
}

h2, h3, h4, h5, h6 {
  font-size: 3em;
}

p {
  font-size: 1.5em;
}

hr {
  border-top: 5px dotted white;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)), url(https://i.pinimg.com/originals/16/5a/ca/165aca25ea0a632a7eddae4230003f17.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Header Section */

.nav {
  background-color: black;
}

.nav-link {
  font-weight: bold;
  color: #ffff;
}

.nav-link:hover {
  color: #ffff;
}

#header {
  padding-bottom: 50%;
  position: relative;
  height: 500px;
}

.row {
  padding-top: 0%;
}

.greeting {
  text-align: left;
  margin-bottom: 10%;
  padding: 5% 10% 50% 5%;
  font-family: "Archivo Black";
  color: #ffff;
}

.header1 {
  padding-top: 20%;
}

/* About Me Section */

#about-me {
  text-align: center;
  /*background-color: #222831;*/
  z-index: 1;
  padding: 0% 20% 5% 20%;
}

.about-header {
  color: #ffff;
  font-family: "Saira Semi Condensed";
  text-decoration: underline;
  font-style: italic;
}

.introduction {
  color: #ffff;
  font-family: "Saira Semi Condensed";
}

/* My Work Section */

.carousel-caption {
  background-color: black;
  font-weight: bold;
  font-family: "Archivo Black";
  color: #ffff;
}

#my-work {
  padding-bottom: 5%;
}

/* Qualifications */

.btn {
  margin: 2% 0% 2% 0%;
  color: black;
}

/*My Hobbies */

#my-hobbies {
  font-family: "Saira Semi Condensed";
  color: #ffff;
}

.hobby1 {
  padding: 3% 5% 3% 5%;
}
.hobbyp1 {
  padding-right: 3%;
}

.hobbyimg1 {
  float: right;
  width: 700px;
}

.hobby2 {
  padding: 3% 5% 3% 5%;
}

.hobbyp2 {
  padding: 20% 5% 5% 5%;
  float: right;
  text-align: right;
}

.hobbyimg2 {
  padding: 5% 5% 5% 3%;
  width: 750px;
}

.hobby3 {
  padding: 5% 5% 5% 5%;
}

.hobbyp3 {
  padding: 25% 5% 5% 5%;
}

.hobbyimg3 {
  width: 500px;
}

/* Animation */

.fade {
  animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

JavaScript

const sectionOne = document.querySelector('#header');
const sections = document.querySelectorAll('section');

const options = {
  root: null,
  threshold: 0,
  rootMargin: "250px"
};

const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
  if (!entry.isIntersecting) {
    return;
  }

  entry.target.classList.toggle('fade');

  console.log(entry.target);

})
}, options);

sections.forEach(section => {
  observer.observe(section);
})

Answer 1

这行得通吗？

.fade {
  animation: fadeIn ease 5s forwards;
  -webkit-animation: fadeIn ease 5s forwards;
  -moz-animation: fadeIn ease 5s forwards;
  -o-animation: fadeIn ease 5s forwards;
  -ms-animation: fadeIn ease 5s forwards;
}

h/t 在 CSS3 动画结束时保持最终状态