He estado tratando de hacer que esta animación se desvanezca y no cambie abruptamente, ¿alguna idea?
Probé este código:
<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>
No proporcionaste suficiente información, pero creo que quieres algo como esto:
.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>Utilice la animación css y agregue la clase de animación a ese elemento cada vez que desee animar el elemento.