CSS实现一个卡片在页面加载时淡入并淡出

Question

CSS实现一个卡片在页面加载时淡入并淡出

3

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

<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不是很熟悉，所以我很乐意听取建议。这可能不是最好的方法，但我认为我应该先自己尝试一下。

- Cole Perry

1

我已经看过它的实际效果，当文档加载时，卡片会淡入淡出。你到底想做什么？ - Tyler Obier

你是在告诉我它对你来说正常工作了吗？你使用的是哪种方法？ - Cole Perry

1

如果你想在页面加载时或加载过程中执行某些操作，你需要使用一些 JavaScript。 - Pedram

2

@Pedram，是的，我同意这比使用CSS动画属性更好。但有些浏览器可能无法正确运行它，或者可能不适用于所有浏览器。最好使用一些原始的JavaScript、jQuery或其他东西，以便在页面加载时、加载完成时等修改页面。我已经研究过了，有多个浏览器没有动画属性，因此这种方法可能不适用于所有浏览器。 - Tyler Obier

2

Pedram是正确的，你需要使用JS onload监听器，并运行JS动画setinterval方法。 - JΛYDΞV

1

@ColePerry 我已经更改了它，使用jquery库使其更适合浏览器。我还会用纯JavaScript为您完成，以备不时之需。如果这有效，请点赞并接受我的答案。 - Tyler Obier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler Obier · Accepted Answer

我在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来检查它是否适用于您的网络浏览器。

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