admin
Animación: cuando termine Correcto — 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:
- Transición de imagen de fundido de entrada
- Transición de texto de fundido de entrada
- Fade-in on Hover Animation
- Fade-in en la animación de desplazamiento
- Transición de fondo de desvanecimiento
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.
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…
