Question

我正在开发一个网络应用。当用户访问目标网页时，我想淡入图片。该图像是某些文本的背景。当图像成功加载后，我想从顶部移动文本。目前，我有以下内容：

<html>
  <head>
    <title></title>
    <style type="text/css">
      .banner {
        background-image: url('/public/img/bg.png');
        background-size: cover
      }

      @keyframes fadeIn { from { opacity:0; } to { opacity:1; }}

      .fade-in {
        opacity:0;
        animation:fadeIn ease-in 1;
        animation-fill-mode:forwards;
        animation-duration:0.2s;            
      }

      @keyframes translateY { from { y:0px; } to { y:100px; } }
      .translate-y {
        animation:translateY ease-in 1;
        animation-duration:0.1s;
        animation-fill-mode:forwards;
      }
    </style>
  </head>

  <body>
    <div class="banner fade-in">
      <h1 class="translate-y">Welcome</h1>
    </div>
  </body>
</html>

这种方法存在一些问题：

动画开始是否加载了背景图像。
＆＃34;欢迎＆＃34;文本在加载背景图像之前开始动画。

我不确定如何解决这个问题。第一项特别令人沮丧。我不能使用jQuery，所以我使用CSS。第二项，我可以使用偏移量。但是，如果图像没有被缓存，则无法正常运行。

Answer 1

之前我已经看过这个问题了，我已经从这个css-tricks article中使用了一个解决方案，但是为了防止链接确实死了，这就是解决方案：你需要为你的类添加一个类/ id body确保所有过渡/动画和你需要的任何东西CSS在身体加载后运行。以下是您可以实现的示例，请注意，您可以在#preload ID下添加所需的任何内容。

CSS

#preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

HTML

<body id="preload">

JS

// trigger right as the document loads
document.getElementById("preload").className = "";

尝试一下，让我们知道这是否适合您。

Answer 2

您可以使用animation-delay并将其添加到元素中。它应该可以解决您的问题：

animation-delay: 2s;

Answer 3

使用<img ...>标签（而不是CSS background-image: ...属性）将图片放在背景中。

您可以将初始不透明度设置为0，然后在图像onload上将不透明度设置为1。使用CSS可以在两种状态之间进行转换：

<style>
.easeload{
    opacity: 0;
    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -ms-transition: all 2s ease; 
    -o-transition: all 2s ease; 
}
</style>

<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">

通过CSS

3 个答案: