CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Fade image on-load using css3

This is my code: http://jsfiddle.net/NVk2N/2/

I'm trying to fade the large background image in. I tried this:

#cover {
    background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg)         no-repeat center center fixed;
    background-size: cover;
    height:100%;
    width: 100%;
    position:fixed;
    opacity:0;
    transition: opacity 2s;
}

however the image never appears. What am I doing wrong?

James

Upvotes: 1

Views: 479

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.

Updated fiddle: http://jsfiddle.net/NVk2N/7/

#cover {
    ...
    -webkit-animation: 2s show;
    -moz-animation: 2s show;
    -ms-animation: 2s show;
    animation: 2s show;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

}


@-webkit-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-moz-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-ms-keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}
@keyframes show {
    from { opacity: 0 }
    to { opacity: 1 }
}

(of course you need to use vendor prefixes where necessary)

Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:

Here's an example on codepen: http://codepen.io/anon/pen/EJayr/

Relevant CSS

#cover {
    position: relative;
    width   : ...;
    height  : ...;
}

#cover:before {
    content : "";
    position: absolute;
    z-index : -1;
    top     : 0; 
    left    : 0;
    width   : 100%; 
    height  : 100%;

    background: url(...) top left no-repeat;

    -webkit-animation: 5s show;
    -moz-animation: 5s show;
    -ms-animation: 5s show;
    animation: 5s show;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

}

Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)

Upvotes: 4

Limnic
Limnic

Reputation: 1876

I believe you may use keyframes and animations to get the job done. It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation

The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.

Upvotes: 0

KM123
KM123

Reputation: 1377

Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.

The best way to do this is to:

1) Create a div with a z-index of 1 which holds your background image and what you want to fade 2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute. 3) Animate the background image with jquery animate

I hope this helps and that will give you your desired outcome!

Upvotes: 0

user3523430
user3523430

Reputation: 1

To trigger a transition you actually need a trigger.

You are setting a opacity of "0" and this is what you get: 0 opacity. The transition would work if the declaration of opacity would change from 0 to 1. That is what transitions do.

The solution of Fabrizio Calderan with the Animation should do the job.

Upvotes: 0

GL.awog
GL.awog

Reputation: 1322

you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.

example

<body onload="document.getElementById('cover').classList.add('showed');">

Upvotes: 0

Related Questions