Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/01/2015, 16:45
LordYo
 
Fecha de Ingreso: julio-2014
Ubicación: España
Mensajes: 24
Antigüedad: 10 años, 4 meses
Puntos: 1
De acuerdo Respuesta: ¿Se puede crear una notificación que desaparezca tras ciertos segundos sól

Cita:
Iniciado por mbm150 Ver Mensaje
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!