How to Fade in Background Image by CSS3 Animation

How to fade in background image by CSS3 Animation

Background images cannot be animated; there would be no algorithm for that. A simple solution is to include <img> with the icon in your HTML instead with opacity: 0 and animate that. Something like.

<li id="home">
<img src="http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png">
<a href="#home">Home</a></li>

#nav li {
    position: relative;
}
#nav li img {
    opacity: 0;
    position: absolute;
    transition: all 1s ease-in;
    top: 0;
    left: 0;
}
#nav li:hover img {
    opacity: 1;
}

http://jsfiddle.net/ExplosionPIlls/q4uHz/1/

Responsive Background Image (animated fade loop) that will span full height of page content?

ITERATION 2 :

I couldn't make any of the methods found on SO to force an absolute div to take on the height of its parent (when that element's height is auto) work.

So, turning to putting the images as backgrounds on the the body itself, using a pseudo before element for images fading in and after for fading out it works. Body height is set to auto, but with min-height: 100vh.

BUT, it takes a lot of GPU, even more than (current at time of writing this) https://www.vortex42studios.com, so let's hope someone can come up with something better. Otherwise we are in danger of draining the user's mobile battery or their laptop scorching their knees.

* {
  margin: 0;
  padding: 0;
}
    body {
      height: auto;
      min-height: 100vh;
      width: auto;
      overflow: visible;
      position: relative;
    }
    body::before, body::after {
        display: inline-block;
        top: 0;
        left: 0;
        position: relative;
        position: absolute;
        content: '';
        animation: none 25s infinite ease;
        animation-fill-mode: forwards;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        z-index: -1;
        overflow: visible;
        background-size: cover;
        background-position: center center;
    }
    body::before {
      animation-name: fadein;
    }
    body::after {
        animation-name: fadeout;
    }
    @keyframes fadein {
      0% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
      }
      20% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      20.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      40.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      60.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
      80% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
      }
      80.001% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }  
      100% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
    }
    @keyframes fadeout {
      0% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
      }
      20% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG05_1080P.JPG);
        }
      20.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG01_1080P.JPG);
        }
      40.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG02_1080P.JPG);
        }
      60.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
        }
      80% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG03_1080P.JPG);
      }
      80.001% {
        opacity: 1;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }  
      100% {
        opacity: 0;
        background-image: url(https://www.vortex42studios.com/source/img/BG04_1080P.JPG);
        }
    }
    .wrap {
      height: auto;
      width: 100%;;
    }
<div class="wrap">some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br>some stuff<br></div>

CSS fade-in background image

You would like to probably use opacity and fade-in effect.

div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}

div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

See the jsfidle if it's what you wanted.

CSS3 fade background image animation - Firefox

Unfortunately, Firefox can’t transition background-image.. So you have to do it another way.

Here is another stackoverfow question related to your problem, with some alternatives. :
CSS3 background image transition

Full background image with fade effect

To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a @keyframes rule of their own.

For "n" images you must define:

  • a=presentation time for one image
  • b=duration for cross fading
  • Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

  1. 0%
  2. a/t*100%
  3. (a+b)/t*100% = 1/n*100%
  4. 100%-(b/t*100%)
  5. 100%

Src: http://css3.bradshawenterprises.com/cfimg/

.crossfade > div {

  animation: imageAnimation 8s linear infinite;

  backface-visibility: hidden;

  background-size: cover;

  background-position: center center;

  color: transparent;

  height: 100%;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

}

.crossfade {

  height: 500px;

}

@keyframes imageAnimation {

  0% {

    opacity:1;

  }

  17% {

    opacity:1;

  }

  25% {

    opacity:0;

  }

  92% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}

.crossfade div:nth-of-type(1) {

  background-image: url(http://placehold.it/200/f00);

  animation-delay: 6s;

}

.crossfade div:nth-of-type(2) {

  background-image: url(http://placehold.it/200/0b0);

  animation-delay: 4s;

}

.crossfade div:nth-of-type(3) {

  background-image: url(http://placehold.it/200/00f);

  animation-delay: 2s;

}

.crossfade div:nth-of-type(4) {

  background-image: url(http://placehold.it/200/ff0);

  animation-delay: 0;

}
<div class="crossfade">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

Opacity Animation for background-image

Answer to your first question:

Put the background-image on a pseudo element ::before instead:

#InnerImage::before {
  background: url('imgurl.com') no-repeat center left;
  content: "";
  position: absolute;
  /* the following makes the pseudo element stretch to all sides of host element */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}

This requires to set position: relative; on #InnerImage:

#InnerImage {
  position: relative;
}

and you need to make sure all other child elements are above the pseudo element using z-index (which only applies the way you need if you position those elements):

#InnerImage * {
  position: relative;
  z-index: 2;
}

Notice: #OuterImage #InnerImage can be safely shortened to #InnerImage since there may be only one element on a page with any given id value anyway. Also I'd advise not to use id selectors in CSS unless you know for sure why you are doing it.

Regarding your animation, it seems like you want it to start only after two seconds have gone by. This can be achieve using a transition like this:

transition: opacity 1s ease 2s;

where 1s is transition-duration and 2s is transition-delay.

https://developer.mozilla.org/en/docs/Web/CSS/transition

Example:

#InnerImage::before {

  background: url(http://lorempixel.com/300/200) no-repeat center left;

  content: "";

  position: absolute;

  /* the following makes the pseudo element stretch to all sides of host element */

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  transition: opacity 1s ease 2s;

  z-index: 1;

}

#InnerImage {

  position: relative;

  width: 300px;

  height: 200px;

}

#InnerImage * {

  position: relative;

  z-index: 2;

}

#InnerImage:hover::before {

  opacity: 0.25;

}
<div id="InnerImage">

  <h2>Hey!</h2>

  <button>noop</button>

</div>

CSS Fade-In/Out Background Images Showing Blank Last Image

I'm assuming it's your timings.

The animation lasts for 30s and for 75% of that time, the image is opacity: 0 with no transitions. That means that after 19.5s (25% + 12s delay for figure:nth-child(3)), there's nothing visible for the next 10.5s until the animation starts again for figure:nth-child(1).

Changing it so all values are thirds should tidy things up (i.e. 66% of the time has opacity: 0 and updating the delays to be 10s or the duration to be 18s). Alternatively, you could have 4 figures and change the delays to multiples of 7.5.

Fading in a background image using javascript or css on hover

Add a transition rule to the body tag. The same can be done in css, without javascript.

function changeBgImage() {
  document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}

function ogBgImage() {
  document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}
body {
  background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  
  transition: all 0.7s linear;
  
}
<body>
  <div class="gwraith">
    <a href="../Legends/wraith.html">
    <img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
                            onmouseover="changeBgImage();" onmouseout="ogBgImage();">
    </a>
  </div>
</body>

Related Topics

How to Get Rid of Unwanted Space Between Inline-Block Columns

Infinite Image Slider with Pure CSS3

How to Create a Row of Elements of Equal Width Inside an Inline Container? Possibly Using Flexbox

How to Float Text Around Image in React Native

CSS Background-Image Path Issues

Add SCSS File to the Stackblitz

Full Height Div Inside Td

Leaving Certain Values Unchanged When Using CSS Shorthand Properties

Why Is a Pseudo-Class So Called

Sass Store Selector in Variable

Sidemenu Background-Color in Ionic-V4

Ie11 Making Background Image Text Blurry

Difference Between Blank and Empty Pseudo-Classes

How to Override Device Pixel Ratio

Why Do Inline Elements Behave Like Block Level Elements When Floated

Styling Radio Button

Bootstrap: How to Collapse Navbar Earlier

Visual Studio Code CSS Indentation and Formatting


Leave a reply



Submit