Javascript:网站标题幻灯片淡入效果

Question

由于这是一个相当长的问题-在此先感谢那些花时间阅读它的人!我正在做一个个人博客网站元素，在索引页面中，我想实现一个幻灯片标题(包含背景图片、标题和一个将用户重定向到实际 psot 的按钮)以动态显示特色博客文章。当页眉转换为另一个时，我还想要淡入效果。我的标题 html 如下所示:

var slideIndex = 0;

function carousel() {
  var i;
  var x = document.getElementsByClassName("header-slide");
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0;
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1;
  }
  x[slideIndex - 1].style.opacity = 1;
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 3000);
}

.header-1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#1);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#2);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#3);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-style {
  display: none;
  transition: opacity .5s ease-in;
}

<div class="slideshow-container">
  <div class="header-slide">
    <header class="header-1">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#1</h1>
        <a class="btn btn-full" href="#">Read full story</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-2">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#2</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-3">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#3</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>
</div>

我已经有下面的js脚本，虽然嵌入在html文件中，但幻灯片显示了标题，但未能实现淡入效果。

我也想要淡入效果，所以我添加了以下CSS代码。

通过以上所有措施，我的网站页眉仍然无法以淡入效果幻灯片播放。我的问题是，似乎设置 transition 属性不会改变任何东西，因为标题不透明度被我的 js 脚本改变了(所以每次它从 0 变为 1，CSS 将处理它的变化)？感谢任何帮助!

Answer 1

使用css关键帧动画:

#header {
  animation: fade 5s ease-out infinite;
}

@keyframes fade {
  0% {
     opacity: .1
  }
  100% {
     opacity: 1
  }
}

<div id="header">
<img src="https://c1.staticflickr.com/5/4016/4543539771_1325623dd6.jpg"></img>
</div>

或者看看浏览器原生动画api:

The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript.

This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects.

It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

https://stackoverflow.com/a/53785137/2494754