Saltar al contenido

Cómo agregar una animación de transición de aparición gradual CSS a su texto, imágenes, desplazamiento y desplazamiento

febrero 16, 2022
GettyImages 1192085495.jpegkeepProtocol

Animación: cuando termine derecho — da vida a un sitio web y aumenta el compromiso.

Cuando termine incorrectoes nauseabundo.

Un sitio web atractivo ayuda a lograr los objetivos comerciales. Con tanto compitiendo por la atención del consumidor promedio, necesita encontrar maneras de sobresalir.

El uso de efectos de animación de transición sutiles es una forma de impresionar a un visitante del sitio web.

Un tipo popular de animación que casi cualquier marca puede usar de manera efectiva es el transición de desvanecimiento. Este efecto estilístico permite que las imágenes o el texto de su sitio web aparezcan o desaparezcan gradualmente.

Puede usar este estilo para texto, imágenes, desplazamiento o desplazamiento. Estas son las opciones que discutiremos a continuación:

El impacto de la animación de aparición gradual puede ser poderoso. Afortunadamente, es bastante fácil de implementar con hojas de estilo en cascada (CSS), un lenguaje de codificación utilizado para mejorar la apariencia de su sitio web.
Descargar ahora: Guía de introducción gratuita a HTML y CSS

Transición de fundido CSS

Una transición de fundido CSS es un efecto estilístico en el que un elemento, como una imagen, texto o fondo, aparece o desaparece gradualmente en la página.

Para crear estos efectos, utilizará la propiedad de transición o animación en CSS. Al usar la propiedad de transición, solo podrá especificar un estado inicial y un estado final, no puntos intermedios. Por ejemplo, puede configurar un elemento div para que pase de rojo a morado. Pero para especificar que el div cambie de rojo a azul a púrpura a rosa, necesitará usar la propiedad animation.

Las transiciones CSS también requieren un activador, como un visitante que se desplaza sobre un elemento, y las animaciones no. De forma predeterminada, una animación comenzará automáticamente su secuencia cuando se cargue la página. Aunque, puede retrasar su hora de inicio utilizando la propiedad animation-delay.

Puede ver cómo se usan las propiedades de transición y animación en los ejemplos a continuación.

También puede consultar La diferencia principal entre animaciones y transiciones CSS para obtener más información.

Me gusta transiciones de desvanecimiento en películas, las transiciones de fundido CSS y las animaciones funcionan mejor en algunos sitios web que en otros. Veamos algunas razones por las que usaría este efecto estilístico.

¿Por qué agregar una animación de aparición gradual a su sitio web?

Agregar animación CSS a su sitio web no debería ser una ocurrencia tardía. No querrás que sea algo que agregues a la mezcla solo para agregar algo de flash a tu sitio web.

En cambio, cada elección de diseño debe justificarse en términos de lo que contribuye (o resta) a la experiencia del usuario (UX).

Así que considere esto: dado que la animación implica movimiento, es casi imposible ignorar este tipo de diseño. Debido a su prominencia visual, debe pensar en cómo implementarlo mientras se encuentra en las primeras etapas del diseño de un sitio web.

El propósito de la animación del sitio web va más allá de la estética. La animación se puede utilizar para mejorar el flujo de su sitio web y crear una interfaz de usuario (UI) más atractiva.

La animación de aparición gradual es solo uno de los muchos tipos de animación que puede implementar en su sitio web. Hay animaciones flotantes, animaciones de carga y docenas de otros ejemplos de animación. Pero la animación de fundido de entrada, en particular, ofrece mucha flexibilidad: puede crear fundidos de imagen, fundidos de texto, fundidos flotantes, fundidos de desplazamiento y fundidos de fondo.

A continuación, veremos un ejemplo de cada uno.

Transición de imagen de aparición gradual usando CSS

Uno de los usos más populares de la animación de aparición gradual es junto con las imágenes. En estos casos, una imagen pasará de transparente a opacidad total. Echemos un vistazo rápido a la propiedad de opacidad de CSS antes de sumergirnos en el ejemplo.

Opacidad de transición CSS

La propiedad de opacidad de CSS se utiliza para especificar qué tan opaco o transparente es un elemento. Los valores de esta propiedad oscilan entre 0 y 1, siendo 0 completamente transparente y 1 completamente opaco.

Cuando se combina con la propiedad de animación o transición, puede usar la propiedad de opacidad para hacer que un elemento cambie de completamente transparente a completamente opaco (o viceversa) durante un período de tiempo.

Al pasar de completamente transparente a completamente opaco, el elemento aparecerá gradualmente en la página. Eso se llama una animación de aparición gradual.

ejemplo de fundido en transición de imagen usando opacidad css

Aquí hay un ejemplo de código para hacer que esto suceda:

ver la pluma Transición de imagen de aparición gradual usando CSS de Christina Perricone (@hubspot) sobre CódigoPen.

Dentro de este código, hay varias variables que puede ajustar para crear el resultado deseado.

Uno de los primeros que puede ajustar es la propiedad de animación (actualmente establecida en 5 segundos) a cualquier cantidad de tiempo que desee.

También notarás «-webkit», «-moz», «-o» y «-ms» — son propiedades de prefijo de proveedor. Estas propiedades hacen que su código de animación de aparición gradual funcione en varios navegadores y motores de renderizado.

Por ejemplo, «-webkit» es para Chrome, Safari y casi todos los navegadores iOS.

Puedes seguir reutilizando este código CSS con otras imágenes usando el fundido en imagen Clase CSS dentro de un elemento que contiene una imagen.

Transición de texto gradual usando CSS

Puede usar las mismas propiedades CSS compartidas anteriormente con solo un ligero cambio para crear un efecto de aparición gradual de texto.

transición de texto gradual usando cssAquí está el código para agregar a su CSS:

ver la pluma Transición de texto gradual usando CSS de Christina Perricone (@hubspot) sobre CódigoPen.

La principal diferencia entre este código y el código utilizado para lograr un efecto de animación de aparición gradual con imágenes es que incluye propiedades de texto, como tamaño de fuente, familia de fuentes y color.

Utilizar el fundido en texto clase en cualquier elemento HTML que desee diseñar de esta manera.

Transición de aparición gradual de CSS al pasar el mouse

Una forma más interactiva de incorporar un efecto de animación gradual implica la funcionalidad de desplazamiento. Esto se puede aplicar a texto o imágenes.

Por ejemplo, puede configurar una imagen para que comience con un 50 % de opacidad y aumente hasta un 100 % de opacidad durante dos segundos cuando el usuario pasa el cursor sobre ella.

ejemplo de transición gradual de CSS al pasar el mouse

Usa este código CSS:

ver la pluma Transición de aparición gradual de CSS al pasar el mouse de Christina Perricone (@hubspot) sobre CódigoPen.

Transición de aparición gradual de CSS en desplazamiento

El uso de la animación de aparición gradual con el desplazamiento es un poco más complicado, ya que también tendrá que usar JavaScript.

El JavaScript registrará el desplazamiento, activando el CSS para ajustar la animación.

ejemplo de una transición gradual css en un pergamino

La porción de CSS de su código debería parecerse a este código compartido por Staffan Adolfson en CodePen:

ver la pluma desvanecerse en el desplazamiento de Staffan Adolfson (@staffan-ad) sobre CódigoPen.

Para el aspecto de JavaScript, querrá conectar este código:

ver la pluma desvanecerse en el desplazamiento de Staffan Adolfson (@staffan-ad) sobre CódigoPen.

Transición de fondo de desvanecimiento CSS

Puede crear un efecto de transición de color de fondo desvanecido que no requiera que el usuario se desplace hacia abajo en la página o que usted escriba JavaScript. En su lugar, usaría la propiedad de animación CSS para diseñar el elemento del cuerpo.

Por ejemplo, puede configurar el fondo para que pase de un color amarillo claro a un verde más oscuro durante seis segundos, y luego hacer que comience de nuevo y se repita.

ejemplo de una transición de fondo css fade de color amarillo a verde

Aquí está el código CSS que usarías:

ver la pluma Transición de fondo de desvanecimiento CSS de Christina Perricone (@hubspot) sobre CódigoPen.

Cree una animación de aparición gradual en su sitio web

La animación de aparición gradual puede ser una herramienta poderosa para contar una historia significativa y mejorar el compromiso. Pero no agregue animaciones innecesarias a su sitio web solo por usar animaciones.

Concéntrese en usar una animación de aparición gradual para resaltar ciertos elementos y crear transiciones más suaves, así como mejorar la experiencia general del usuario de su sitio web.

Nota del editor: esta publicación se publicó originalmente en febrero de 2020 y se actualizó para que sea más completa.

Nueva llamada a la acción