Html CSS使卡片淡入，然后在页面加载时淡出

我正在尝试使此卡淡入，然后在页面加载后立即淡出：

<style>
.container {

    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>

.集装箱{
宽度：200px；
高度：200px；
背景：红色；
-webkit动画：fadeinout 4s线性向前；
动画：FadeInut 4s线性向前；
}
@-webkit关键帧淡出{
0%，100%{不透明度：0；}
50%{不透明度：1；}
}
@关键帧淡入淡出{
0%，100%{不透明度：0；}
50%{不透明度：1；}
}
仪表板
@if（会话（“状态”））
{{session（'status'）}
@恩迪夫
您已登录！

这张卡看起来很好，但没有任何动画

我也试过：

<style>
.container{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}
</style>

<div onload="document.getElementById(test).style.opacity='1'">
    <div class="container" id="test">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Dashboard</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        You are logged in!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.容器{
不透明度：0；
过渡：不透明度2s；
-webkit转换：不透明度2s；/*Safari*/
}
仪表板
@if（会话（“状态”））
{{session（'status'）}
@恩迪夫
您已登录！

---

但两者都不能使卡片所在的容器淡出。我对css很陌生，所以我愿意接受建议。这可能不是最好的方法，但我想我应该先自己尝试一下。

我在jsfiddle.net中运行了第一个片段，红牌似乎会像你想要的那样淡入淡出

---

我看了看它的动作，当文件加载时，卡片会淡入淡出。你到底想做什么？如果你真的想在页面加载时，或者在加载时，等等。。你需要使用一些js@Pedram是的，我同意这是一种比使用css动画属性更好的方法。说一些浏览器可能无法正确运行，或者可能无法在所有浏览器上运行。最好使用一些原始javascript、jquery或其他东西，以便您可以在页面加载时、加载完成时等修改页面。我已经研究过了，有多个浏览器没有动画属性，因此这种方法对浏览器不友好。Pedram是对的，您需要使用JS onload侦听器，并运行JS anime setinterval方法。@ColePerry我已通过使用jquery库将其更改为对浏览器更友好。我将继续使用纯javascript为您实现它。如果这能起作用，请投票并接受我的回答。我用了这段代码，而不是我的代码，它在Firefox、IE或Vivaldii中仍然不会消失。如果它能起作用，这是在Laravel项目中。嗯，我不完全确定它是否能起作用。你是否将jquery包含在主应用程序页面中？@colepery你是否有意见分歧，我可以制作一个服务器，我们可以在那里交谈，我可以帮助你？@colepery为我工作的延误感到抱歉。这是到私人房间的不和谐链接。

<style>
  .container {

    width: 200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
  }

  @-webkit-keyframes fadeinout {

    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes fadeinout {

    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

</style>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Dashboard</div>

        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success" role="alert">
            {{ session('status') }}
          </div>
          @endif

          You are logged in!
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .container {

    width: 200px;
    height: 200px;
    background: red;
  }

</style>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">Dashboard</div>

        <div class="card-body">
          @if (session('status'))
          <div class="alert alert-success" role="alert">
            {{ session('status') }}
          </div>
          @endif

          You are logged in!
        </div>
      </div>
    </div>
  </div>
</div>

$('.container').hide();
$(document).ready(function() {
  $('.container').delay(1000).fadeIn();
  $('.container').delay(5000).fadeOut();
});