[SOLUCIONADO] ¿Se puede crear una notificación que desaparezca tras ciertos segundos sólo con css3?

[LordYo]

¡Hola!

Pues he buscado por aquí y no veo lo que buscaba... Creo que con Javascript sí se puede, pero como siempre hay quien tiene bloqueado javascript, quisiera que fuese algo que todos pudiesen ver... La cosa sería la siguiente:

Estás en la página de edición de un artículo, por ejemplo. Lo editas, le das a guardar y te lleva a la página principal, donde le hemos enviado un parámetro para que muestre el mensaje de que se ha creado o se ha actualizado correctamente. Pues bien, me gustaría que esa notificación apareciese de repente(como lo hace ahora sin efecto) pero que al final acabe desapareciendo por completo, haciéndose transparente poco a poco y eliminando el espacio que ocupa cuando estaba. Es decir, sería cambiarle la transparencia y el tamaño... Sin que sea necesario que se le de click. Sopongo que, al igual que con el click, se usa el :after y/o el :before, pero ignoro en qué momento...

No sé si me he explicado bien, pero quisiera que empezase a hacerse transparente después de 5 segundos de haber cargado la página. Luego ya lo otro sería el tiempo que tarde en hacerse transparente del todo, que eso ya lo controlaría yo con la propiedad "duration" o algo así... .

Si fuese dándole click, no es tan difícil para mí. Pero quiero que sea automático... Un ejemplo:

TÍTULO
Notificación
CONTENIDO

A los pocos segundos empieza a desaparecer (5 segundos sin hacer nada, luego desaparece poco a poco), no quedaría así:


TÍTULO

CONTENIDO

Sino así:


TÍTULO
CONTENIDO

Creo que se entiende de sobra... ¡Un saludo, compañer@s!

De lo contrario, al menos que empiece a desaparecer muy lentamente ya nada más cargar...

[pzin]

Puedes usar una animación en la que el valor para animation-fill-mode sea forwards. Obviamente no desaparece del DOM, pero puedes ocultarlo de la forma que quieras en @keyframes.

[LordYo]

Iniciado por pzin

Puedes usar una animación en la que el valor para animation-fill-mode sea forwards. Obviamente no desaparece del DOM, pero puedes ocultarlo de la forma que quieras en @keyframes.

No desaparecería pero podría ocupar 0px como si realmente hubiese desaparecido, ¿verdad? Es suficiente con que aparente no estar ya y no ocupar su espacio...

Por otro lado, no soy muy entendido en el uso de @keyframes... ¿podrías decirte de algún tutorial, a ser posible en español (si es en inglés, prefiero escrito) sobre cómo se usa? Es decir, no quiero que me lo des todo hecho... pero si me dices algun buen ejemplo de uso de @keyframes, pues me serviría para aprender a hacerlo yo sólo, con lo que tú me has comentado del valor de animation-fill-mode...

¡Saludos!

[mbm150]

Hola,

http://www.w3schools.com/css/css3_animations.asp

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.

[LordYo]

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!

[pzin]

Iniciado por LordYo

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.

Seguramente se deba a que ese elemento tenga algún margin, padding o ambos.