Estoy trabajando en diseñar mi primer sitio, uno pequeño para un amigo que tiene un local de autos de alquiler.
Navegando pude encontrar un slide que utilicé de ejemplo. Es un DIV (div="principal") que contiene una lista desordenada con 4 imagenes de 900x600 px cada una. Mediante display block y una animacion de 12 seg he logrado que las imagenes se vayan sucediendo mostrando un fadein y un fadeon , hasta que en la última (cuarta imágen) la animación coincide con un opacity:0 , con lo cual se desvanece y queda el espacio del div (900*600) en blanco. Hasta aqui , es lo que buscaba, se ve correctamente.
En ese momento quisiera, coincidiendo con que desaparece el Div, quisera que aparezca otro div, en el mismo espacio, donde tengo estructurada la home page, o sea es un div con la portada y secciones del sitio, de las mismas dimensiones que el div anterior.
En resumen, es una presentacion animada, que tras un fade out debería salir del flujo, y dar lugar a un nuevo div no animado.
He probado hacerlo mediante una segunda animacion que al llegar el final de la primera aparezca, pero no he encontrado la forma de que al finalizar la 1era animacion se pueda ejecutar un display:none , o sea, que quede como algo fluído.
Calculo que esto es un tema común de mi inexperiencia, alguien podría sugerirme cual es la forma más practica de resolverlo elegantemente, o quizas a entender como seguir avanzando ?
No tengo problema de publicar el código , gracias anticipadas !