I have been trying to make this animation fade and not change abruptly, any ideas?
I tried this code:
<script>
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = '/includes/img/inmobg1.webp';
images[1] = '/includes/img/inmobg2.jpg';
function changePicture() {
document.getElementById('bg_static').style.backgroundImage = 'url(' + images[i] + ')';
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
</script>
#bg_static{ background: #3d3d3d; background-position:bottom; background-size: cover; background-color:#000; background-repeat: no-repeat; height: 340px; width: 100%; left: 0; margin-left: 0; top: 60px; position: absolute; z-index: -1001; }
<div id="bg_static"></div>
You didn't provide enough info but i think you want something like this:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
@keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/* The style below is just for the appearance of the example div */
.style {
width:90vw; height:90vh;
text-align:center;
padding-top:calc(50vh - 50px);
margin-left:5vw;
border:4px double #F00;
background-color:#000;
}
.style p {
color:#fff;
font-size:50px;
}<div class="style fade-in">
<p>[content]</p>
</div>User css animation and add animation class to that element whenever you want to animate the element.