Mostrar una ventana modal automática con animación 3 segundos

    <div id="modal" class="modal">

        <div class="modal-content">

            <span class="close">×</span>

            <h2>¡Bienvenido!</h2>

            <p>Este es un mensaje de bienvenida que aparece automáticamente.</p>

        </div>

    </div>

 <style>

 body {

    font-family: Arial, sans-serif;

}

.modal {

    display: none; /* Ocultar por defecto */

    position: fixed; 

    z-index: 1; 

    left: 0;

    top: 0;

    width: 100%; 

    height: 100%; 

    overflow: auto; 

    background-color: rgb(0,0,0); 

    background-color: rgba(0,0,0,0.4); 

    animation: fadeIn 0.5s; /* Animación de entrada */

}

.modal-content {

    background-color: #fefefe;

    margin: 15% auto; 

    padding: 20px;

    border: 1px solid #888;

    width: 80%; 

    animation: slideIn 0.5s; /* Animación de entrada */

}

.close {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

}

.close:hover,

.close:focus {

    color: black;

    text-decoration: none;

    cursor: pointer;

}

/* Animaciones */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}

@keyframes slideIn {

    from { transform: translateY(-50%); }

    to { transform: translateY(0); }

}

</style>

<script>

// Esperar 3 segundos y mostrar la modal

setTimeout(function() {

    document.getElementById("modal").style.display = "block";

}, 3000);

// Cerrar la modal cuando se hace clic en <span> (x)

document.querySelector(".close").onclick = function() {

    document.getElementById("modal").style.display = "none";

}

// Cerrar la modal si el usuario hace clic fuera de ella

window.onclick = function(event) {

    const modal = document.getElementById("modal");

    if (event.target === modal) {

        modal.style.display = "none";

    }

}

</script>