html - CSS 使卡片淡入然后在页面加载时淡出

Question

我想让这张卡片在页面加载后立即淡入然后淡出:

<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{ 
    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>

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

Answer 1

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

https://jsfiddle.net/q2cymof9/

<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>

您使用的是什么浏览器？您可以转到此链接 https://caniuse.com/#search=animation 来检查它是否适用于您的 Web 浏览器。

这里是它的 jquery，使它对浏览器更友好!

<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();
});