CODEWITHSUNDEEP
htmlcssimage
user70192
user70192

Reputation: 14204

Fade In Image On Load Via CSS

I am working on a web app. When a user visits the landing page, I want to fade-in an image. That image is the background for some text. When the image has successfully loaded, I then want to move the text in from the top. Currently, I have the following:

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

There are several problems with this approach:

  1. The animation starts whether the background-image is loaded or not.
  2. The "Welcome" text starts animating before the background-image is loaded.

I'm not sure how to fix this. The first item is especially frustrating. I can't use jQuery, so I'm stuff with CSS. The second item, I could use an offset. However, once again, if the image isn't cached, nothing runs properly.

Upvotes: 1

Views: 17380

Answers (3)

hlorand
hlorand

Reputation: 1406

Place your image in the background with an <img ...> tag, (not with CSS background-image: ... attribute).

You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:

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

Upvotes: 13

m0bi5
m0bi5

Reputation: 9462

You can use animation-delay and add it to the elements.It should solve your problems :

animation-delay: 2s;

Upvotes: -1

AGE
AGE

Reputation: 3792

I have seen this problem before, there is a solution I have used myself from this css-tricks article, but just in case the link does go dead here is the solution: You need to add a class/id to your body to ensure that everything transitions/animations and anything you need CSS runs after the body loads. The below is an example of what you can achieve, keep in mind you can add anything else you need under the #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 = "";

Give it a try and let us know if this worked for you.

Upvotes: 2

Related Questions