Si encuentra elementos en su sitio que cambian dinámicamente o en respuesta a sus acciones en pantalla, puede tener la tentación de agregar efectos similares a su propio sitio. Efectos como estos pueden hacer que su sitio web sea interactivo y ayudar a mejorar su experiencia de usuario.
Antes de comenzar a crearlos, debe comprender exactamente qué son estos efectos. En el mundo del diseño se clasifican como transiciones o animaciones.
En esta publicación, definiremos transiciones y animaciones y explicaremos sus diferencias.
Transición y animación CSS
Las transiciones y animaciones CSS son similares en muchos aspectos, pero difieren en la complejidad de las transiciones, la interacción del código CSS con JavaScript, el funcionamiento del bucle y la metodología que ejecuta la animación. Las transiciones CSS generalmente son mejores para movimientos simples de z-to, mientras que las animaciones CSS son para series de movimientos más complejas.
Es fácil confundir las transiciones y animaciones CSS porque te permiten hacer cosas similares. Estos son solo algunos ejemplos:
- Puede visualizar los cambios de propiedad.
- Puede configurar las funciones de suavizado para controlar la velocidad a la que cambian los valores de propiedad.
- Puede establecer la duración de la transición o animación.
- Puede definir propiedades que interpreten los cambios e inicien una respuesta.
- Puede recopilar datos sobre los eventos que desencadenan una transición o animación y utilizarlos para mejorar su campaña de marketing.
A pesar de sus similitudes, las transiciones y animaciones son diferentes y tienen sus propias ventajas y desventajas. Aquí hay una breve descripción de sus diferencias:
| transiciones CSS | animaciones CSS |
|
|
Aquí hay una manera fácil de visualizar las principales diferencias entre las transiciones y animaciones CSS:
Antes de decidir cuál es el adecuado para su sitio web, debe comprender mejor cómo se comportará una transición o animación en su sitio web. Miremos más de cerca.
transiciones CSS
Si solo desea realizar una acción simple en su sitio, la forma más fácil es revisarlo. Las transiciones están vinculadas a una acción desencadenante, generalmente cuando el puntero del mouse está sobre el elemento. En este caso :flotar La pseudoclase se usa para cambiar el valor de una propiedad CSS, lo que hace que el elemento responda según sea necesario.
Puede configurar un elemento para cambiarlo color, escalao posición. Tú también puedes girar, torcidoy Traducir elementos. Si desea una transición un poco más complicada, incluso puede influir en varias propiedades a la vez. Por ejemplo, si desea que una transición cambie el color y el ancho del fondo, especifique entradas para ambos color de fondo y ancho bienes raíces.
Propiedades de transición CSS
Para crear una transición, puede utilizar la propiedad de transición abreviada o una combinación de las siguientes subpropiedades.
- propiedad temporal: especifica el nombre de la propiedad CSS a la que se aplica el efecto de transición. Por ejemplo, si esta propiedad se establece en «ancho», se producirá una transición cuando el usuario se desplace sobre el elemento y su ancho comience a cambiar.
- periodo de transición: determina el tiempo que tarda la transición en completarse.
- función de tiempo de transición: marca el ritmo del efecto de transición.
- transición-retraso: determina cuándo comienza el efecto de transición.
Transiciones de CSS y JavaScript
Los valores de propiedad que están predefinidos en CSS pueden resultar restrictivos para algunas interacciones. En estos casos, es posible que desee utilizar JavaScript. Pero si no desea usar JavaScript por completo, puede establecer un enfoque híbrido.
La transición probablemente sea perfecta si elige administrar los aspectos más difíciles con JavaScript.
Ejemplos de transición de CSS
Las transiciones pueden ser útiles, pero son más básicas que las animaciones CSS. Veamos algunos ejemplos.
Nota: Los siguientes ejemplos solo se reproducen en bucle porque son GIF. Recuerde: las transiciones no se pueden repetir sin cesar.
Ejemplo de estiramiento al pasar el mouse
El siguiente elemento cambia entre dos estados específicos dependiendo de dónde se encuentre el mouse. Si pasa el cursor sobre un elemento, se activa una transición, lo que hace que el elemento sea mucho más alto pero más estrecho y parezca estirado.
Ejemplo de contador de espacio
En el siguiente ejemplo, la cantidad de veces que un usuario presiona la barra espaciadora se «graba» a través de una combinación de CSS y JavaScript. El número volverá a 0 cuando el usuario presione el botón Reiniciar.
Ejemplo de botón
Cuando pasa el cursor sobre el elemento de abajo, la flecha se convierte en un rectángulo, por lo que el texto «¡Vamos!» parece un botón.
La transición de CSS no funciona
Si, después de crear su transición, no funciona según lo previsto, puede buscar algunas soluciones rápidas.
1. La propiedad de transición se establece en ninguno.
Como se mencionó anteriormente, la propiedad de transición especifica el nombre de la propiedad CSS a la que se aplica la transición. Puede definir esta propiedad con la palabra clave «todas», que indica que se van a transferir todas las propiedades, o una lista de propiedades que se van a transferir. Sin embargo, si la propiedad se establece en «ninguna», no se transferirá ninguna propiedad.
2. La duración de la transición no está definida o se establece en cero o en un valor negativo.
Como se mencionó anteriormente, la propiedad de duración de la transición especifica la duración de la transición. Puede ser cualquier valor positivo. Si la propiedad no está definida, se considera que el valor es cero segundos. El elemento seguirá cambiando de un estado al siguiente, pero el cambio será inmediato: no se producirá ninguna animación.
Un valor negativo invalida la declaración, por lo que se supone que la propiedad no está definida.
Para comprender cómo se verá esto, compare los dos efectos de transición a continuación.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
¿Cuándo usar transiciones y cuándo usar animación?
Resumamos los casos de uso ideales para transiciones sobre animaciones:
- Cree movimientos simples de a
- El efecto solo tiene lugar cuando el usuario interactúa con el elemento al pasar el cursor sobre él o hacer clic en él.
- Usando JavaScript
- Botones de diseño para cambiar de color o tamaño cuando el usuario se desplaza sobre ellos
animaciones CSS
Las animaciones son más complejas, pero también ofrecen más flexibilidad: cuanto más flexibles, más partes involucradas. Gracias a las animaciones CSS, puedes establecer diferentes etapas que cambian repetidamente el comportamiento de un elemento a medida que dura. Esto le da más control sobre los valores de las propiedades en las animaciones.
Para ello, defina un conjunto de fotogramas clave. Los fotogramas clave indican el principio y el final de la animación, así como los pasos intermedios entre el principio y el final. En otras palabras, cada fotograma clave describe cómo debe mostrarse el elemento animado en cualquier punto de la secuencia de animación. Puede configurar tantos fotogramas clave como desee (pero necesita un mínimo de dos).
Gracias a estas capacidades, puede crear animaciones HTML5 que pueden competir con las creadas por herramientas avanzadas como Flash.
Las animaciones también te permiten especificar valores de propiedad en cada fotograma clave sin tener que declararlos. Un elemento cambia suavemente su comportamiento cuando se alcanza el fotograma clave correcto, incluso si la propiedad no se incluyó primero.
Propiedades de la animación CSS
Puede utilizar una propiedad de acceso directo de animación o una combinación de las siguientes subpropiedades para crear una transición.
Solo se requieren las propiedades animation-name y animation-duration. Si no se especifican otras propiedades, se establecerán en sus valores predeterminados.
- nombre-de-animación: Especifica el tipo de animación requerida.
- duración de la animación: Especifica la duración de la secuencia de animación.
- animación-tiempo-función: establece la velocidad de la animación.
- Retraso de animación: especifica cuándo comienza la animación. Puede utilizar milisegundos o segundos, y valores positivos o negativos.
- dirección de animación: especifica la dirección de la animación.
- modo de relleno de animación: especifica si los estilos de animación se aplican antes o después de reproducir la animación.
- número de iteraciones-animaciones: Define cuántas veces se reproducirá la animación.
- estado-de-reproducción-de-animación: Se utiliza para pausar y reanudar una secuencia de animación.
Animaciones CSS en bucle
A diferencia de una transición que solo se reproduce una vez cuando se activa, una animación CSS no requiere una acción de activación y se puede reproducir en bucle. Puedes repetir tantas veces como quieras o configurarlo para que dure para siempre. Usted crea esta especificación con número de iteraciones-animaciones una propiedad que le permite establecer su valor en segundos, o infinito.
Hay una manera no tan fácil de obtener un bucle de transición CSS jugando con fin de transición evento. Sin embargo, la animación CSS es más fácil si prefiere agregar un bucle.
Un ejemplo de animación CSS
A continuación se muestra un ejemplo de una animación CSS. Hay muchos estados por los que pasa y recorre un gráfico. El vapor disminuye, sube y desaparece. Esta imagen es mucho más dinámica que la transición CSS.
¿Cuándo usar animaciones y cuándo usar transiciones?
Resumamos los casos de uso ideales para animaciones en lugar de transiciones:
- Crear series de movimientos más complejas.
- El efecto tiene lugar justo después de cargar la página.
- Solo usando CSS (sin JavaScript)
- Diseño de superposiciones de instrucciones para la interfaz de usuario
Decidir entre transiciones y animaciones
Las transiciones y animaciones CSS tienen muchas similitudes. No hace falta decir, sin embargo, que también tienen diferencias significativas que deberían indicar cómo los usa en su sitio web para mejorar sus esfuerzos de marketing. Independientemente de lo que decida, agregar efectos de transición o animaciones a su sitio web puede mantener a sus visitantes interesados y encantados, y hacer que regresen.
Nota del editor: esta publicación se publicó originalmente en marzo de 2020 y se actualizó para que sea completa.
