Cita:
Iniciado por mbm150 Hola,
[URL="http://www.w3schools.com/css/css3_animations.asp"]http://www.w3schools.com/css/css3_animations.asp[/URL]
Ahi te explica un poco como funcionan, tendras que leerte la referencia a todas las propiedades y como te ha dicho el compañero, creas una animacion que cambie opacity de 1 a 0 y listo.
Saludos.
¡Muchas gracias! He aprendido a hacerlo gracias a vosotros... Al final lo he hecho así, por si le interesa a alguien...
Los @keyframes usados son los siguientes (con las consiguientes variantes con sus prefijos para todos los navegadores, claro):
Código HTML:
@keyframes transparente {
to {opacity: 0;}
}
@keyframes desaparece {
to {
height: 0px;
margin-top: -70px;
}
}
En mi caso le he quetado el margin -70px porque haciéndolo sin esto, sólo poniendo height a 0px no me quedaba exactamente igual que si no estuviese, no sé por qué. O al menos no lo veía así yo. En cualquier caso, eso es lo de menos.
He aplicado las animaciones en los elementos que iban a ser las notificaciones con esta línea de código:
Código HTML:
animation: transparente 2s 3s forwards, desaparece 1s 4.55s forwards;
Como véis, al final me ha parecido demasiado 5 segundos, así que lo he dejado en 3 segundos... :D
Ya puedo dar por solucionado el tema...
¡Muchas gracias a amb@s!