I'm using the background image in style tag.
<style>
body {
background-image: url("img.jpg");
background-size: cover;
transition: background-image 4s linear;
}
</style>
I want the image to fade in, without having to add separate divs on the page. Is it possible to achieve this?
CodePudding user response：
Here's a method using CSS only. However, there is a caveat, CSS cannot wait for an event so it can't know when the whole site is loaded.
Instead in this snippet it waits for 1 second before starting to bring in the background image which is on the before pseudo element of the body.
body {
width: 100vw;
height: 100vh;
/*just for demo */
position: relative;
}
body::before {
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
animation: fadein 5s 1 1s linear forwards;
}
@keyframes fadein {
to {
opacity: 1;
}
}Hello, this is some text in the body. It will be seen even before the background starts to fade in.CodePudding user response：
Yes, it is possible. This is how you can do that.
@keyframes mymove {
from {
/* background: white; */
}
to {
background: url("https://www.shutterstock.com/image-photo/welded-metal-chain-various-rigging-260nw-2238426561.jpg");
}
}
body {
animation: mymove 2s infinite;
}<body><body>CodePudding user response：
How to fadein the background
There are several ways to achieve that but the easiest is proably using the transition css property.
CSS transition property:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
Usually transitions are applied with events at the css layer. So for example you may have a third rule that on :hover will apply the transition of a given css property (opacity in this case). But here we need to do it on document laod and there's no css selector for that so we'll add the class with a slow delay after the document is ready.
Demo:
So in this demo here I have a css rule addressing the .bg elements setting their background in a pseudo element covering the whole parent element but with opacity: 0.
The reason why I used the pseudoelement ::before it's because the transition will be limited to the background itself and not the whole body content. Important: I set the z-index: -1 so that the element will be granted to stay on background.
Then there's another rule addressing .show elements that will set the opacity: 1 with a transition lasting 5 seconds.
The bg class is given to the body in the html and the class show gets applied via js on the event DOMContentLoaded (when the page is ready).
The same effect can be achieve clicking on a button in the page that will call that same fadeInBackground function. That function will remove the show class and will wait an instant before adding the class back.
Such delay is important because the css engine will react badly otherwise if you remove and add the class too quickly it won't perform the animation (that's for the reason explained above on css events compared to triggering the action via js).
//on page load, fades the background in
document.addEventListener('DOMContentLoaded', ()=> fadeInBackground());
function fadeInBackground(){
//removes the class show from body
document.body.classList.remove('show');
//waits 200ms before adding the class show to body
setTimeout(()=> document.body.classList.add('show'), 200);
}.bg::before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('https://thumbs.dreamstime.com/z/cors-caron-bog-pools-as-seen-boardwalk-national-nature-reserve-near-tregaron-wales-60217166.jpg');
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
z-index: -1;
}
.show::before {
opacity: 1;
transition: opacity 5s;
}
div{
background: white;
opacity: .8;
padding: 1em;
background: dashed 4px gray;
}<body >
<div>
<p>This is the page content slightly faded relative to the background</p>
<br>
<p>The fadein is expected to happen at page load but you can trigger the action also from here</p>
<button onclick="fadeInBackground()">Fade in background</button>
</div>
</body>CodePudding user response：
Its possible with keyframes just a little more tricky.
@keyframes backgroundAnimation {
from {
background-position: 0% -100%;
}
to {
background-position: 0% 0%;
}
}
@keyframes azcdF {
from {
background-color: white;
opacity: 1;
}
to {
background-color: white;
opacity: 0;
}
}
#franz {
background-image:
url("https://i.stack.imgur.com/vf9IF.png");
animation: backgroundAnimation 5s linear 1 0s;
height: 100%;
width: 100%;
position: absolute;
background-repeat: no-repeat;
}
#aniZ {
animation: azcdF 5s linear 1 0s;
opacity: 0;
height: 100%;
width: 100%;;
position: absolute;
z-index: 999;
background-repeat: no-repeat;
}<div id="franz">
<div id="aniZ">
</div>
</div>