Implementar la transición de desvanecimiento usando CSS
- Transición de fundido CSS
- Desvanecer utilizando la propiedad de animación
- Desvanecer utilizando la propiedad de transición
- Desvanecimiento usando CSS en línea
- Desvanecer usando CSS externo
- Fundido de salida usando eventos Dom
En este artículo, aprenderemos sobre la animación de desvanecimiento y cómo implementarla usando CSS interno, externo y en línea. Más adelante, veremos cómo usar eventos DOM para implementar la funcionalidad de atenuación.
Transición de fundido CSS
Una transición de fundido CSS es un efecto visual en el que un elemento, como una imagen, texto o fondo, aparece o desaparece gradualmente en la página.
Se utilizará la propiedad de transición CSS o la propiedad de animación para producir estos efectos. Usando la propiedad de transición, solo puede especificar un estado inicial y final.
La diferencia entre las transiciones CSS y las animaciones es que las transiciones necesitan un activador, como que el usuario pase el cursor sobre un elemento, pero las animaciones no. Cuando se carga la página, el comportamiento predeterminado de una animación inicia su secuencia inmediatamente.
Sin embargo, puede retrasarlo usando el parámetro animation-delay. Este artículo se centra únicamente en FadeOut.
Veamos cómo podemos lograr la transición de desvanecimiento usando CSS.
Desvanecer utilizando la propiedad de animación
Como se discutió anteriormente, la funcionalidad de desvanecimiento se puede lograr mediante las propiedades de transición y animación de CSS. Comencemos por crear la funcionalidad usando la propiedad animación.
Código:
<html>
<head>
<style>
.fade {
animation: fadeOut 5s;
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade"> Internal CSS Fade Out using Animation !</div>
</body>
</html>
Primero, asignamos una clase fade al div. Todo el estilo se hará en esta clase.
Ahora nos dirigimos hacia la etiqueta estilo. La primera propiedad que llamamos en la clase es la animación: fadeOut 5s, y esta propiedad te permite realizar animaciones creativas en tus páginas web.
El fadeOut es el nombre de la animación, y 5s es la duración de la animación que define la duración que debe tomar una animación para completar un ciclo. Luego usamos fotogramas clave en el nombre de la animación fadeOut.
Los fotogramas clave se utilizan para determinar la regla de animación. Estamos especificando que al 0 %, la opacidad/transparencia del elemento es 1, lo que significa 100 %, ya que la propiedad de opacidad del CSS tiene un rango de valores de 0 a 1, y la opacidad será 0 al 100 %, lo que significa que el texto aparecerá con total visibilidad y se desvanecerá lentamente.
Desvanecer utilizando la propiedad de transición
Implementemos la funcionalidad usando la propiedad transición de CSS. La propiedad transition necesita una función de activación como hover, focus, etc., para funcionar.
Código:
<html>
<head>
<style>
.fadeOut:hover {
opacity: 10%;
transition: opacity 3s;
}
}
</style>
</head>
<body>
<div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
</body>
</html>
En el código anterior, escribimos transición: opacidad 3s. La primera subpropiedad de la transición es la propiedad de transición, que especifica los nombres de las propiedades CSS a las que se deben aplicar las transiciones.
La segunda subpropiedad es la duración de la transición, que especifica la duración durante la cual deben ocurrir las transiciones. Entonces, simplemente estamos diciendo que cuando un usuario coloca el cursor sobre el texto, la opacidad del texto debe ser del 10% en la duración dada.
Desvanecimiento usando CSS en línea
CSS en línea da estilos a los elementos HTML dentro de sus etiquetas. No se recomienda CSS en línea ya que no podemos usar todas las propiedades dentro de la etiqueta HTML.
Código:
<html>
<head>
<style>
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
</style>
</head>
<body>
<div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
</body>
</html>
Mientras escribimos el código usando CSS en línea, aquí la pregunta puede ser por qué no escribimos fotogramas clave dentro de la etiqueta div. Debido a que los fotogramas clave no forman parte de los elementos HTML, se les llama animaciones.
Desvanecer usando CSS externo
Las hojas de estilo externas se crean en archivos independientes con la extensión .css. Una hoja de estilo externa es una lista de reglas CSS y no se pueden usar etiquetas HTML.
Una hoja de estilo externa se puede vincular mediante una etiqueta de enlace, que se coloca en la etiqueta encabezado de una página HTML. Una sola página HTML puede utilizar tantas hojas de estilo externas como desee.
Por ejemplo, cree un archivo con el nombre style.css o con el nombre que desee, y copie el código de la etiqueta de estilo de los ejemplos anteriores en el archivo. Necesitamos agregar la referencia del archivo CSS a nuestra página HTML.
Código:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="fade">External CSS Fade Out !</div>
</body>
</html>
Fundido de salida usando eventos Dom
Otro método para lograr la funcionalidad de desvanecimiento es usar los eventos DOM onMouseOver y onMouseOut. El evento onMouseOver se activa cuando el puntero del mouse se mueve sobre un elemento, y el evento onMouseOut ocurre cuando el mouse se ha alejado del elemento.
Código:
<html>
<head></head>
<body>
<div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
I will fade out on mouse hover
</div>
</body>
</html>
Establecemos la opacidad al 10% para el evento onMouseOver. Suponga que desea desvanecer completamente el elemento y establecer la opacidad en 0.
El texto se desvanece cuando el cursor está sobre, como se ve en la salida, luego vuelve a su posición original cuando se quita el cursor.