Saltar al contenido

La principal diferencia entre animaciones y transiciones CSS

febrero 18, 2022
css transition vs animation.jpgkeepProtocol

Si ha encontrado elementos en un sitio web que cambian dinámicamente o en respuesta a sus acciones en pantalla, puede sentirse tentado a agregar efectos similares a su propio sitio. Dichos efectos pueden hacer que su sitio web sea interactivo y ayudar a mejorar la experiencia del usuario.

Antes de que pueda comenzar a crearlos, debe comprender qué son exactamente 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.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

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 establecer funciones de aceleración 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 especificar propiedades que interpreten los cambios e inicien una reacción.
  • Puede recopilar datos sobre los eventos que provocan el lanzamiento de la transición o la animación y utilizarlos para mejorar su campaña de marketing.

A pesar de sus similitudes, las transiciones y las animaciones son diferentes, y ambas tienen ventajas y desventajas. He aquí una breve descripción de sus diferencias:

Transiciones CSSAnimaciones CSS
  • Solo se puede pasar del estado inicial al final; no hay pasos intermedios
  • Solo se puede ejecutar una vez
  • Requerir un disparador para ejecutar (como pasar el mouse)
  • Corre hacia adelante cuando se dispara y hacia atrás cuando se quita el gatillo
  • Más fácil de usar con JavaScript
  • Lo mejor para crear un cambio simple de un estado a otro
  • Puede pasar del estado inicial al final, con pasos intermedios en el medio
  • Puede repetirse infinitamente gracias a la propiedad animation-iteration-count
  • Se puede activar pero también se puede ejecutar automáticamente
  • Puede correr hacia adelante, hacia atrás o en direcciones alternas
  • Más difícil de usar con JavaScript
  • Lo mejor para crear una serie compleja de movimientos.

Aquí hay una manera fácil de visualizar las principales diferencias entre las transiciones y animaciones CSS:

transición vs animación css

Antes de decidir cuál es el adecuado para su sitio, necesitará comprender mejor cómo funcionará una transición o animación en su sitio. Miremos más de cerca.

Transiciones CSS

Si solo desea una acción simple en su sitio, una transición es la forma más fácil de hacerlo. Las transiciones están conectadas a una acción desencadenante, más comúnmente, cuando el mouse se desplaza sobre un elemento. En ese caso, el :flotar La pseudo clase se usa para cambiar el valor de la propiedad CSS, lo que hace que el elemento reaccione como se desea.

Puede establecer un elemento para cambiar su color, escalao posición. Tú también puedes girar, sesgary traducir objetos. Si desea una transición un poco más complicada, incluso es posible afectar varias propiedades a la vez. Por ejemplo, si desea que su transición altere el color y el ancho del fondo, especifique entradas para ambos color de fondo y ancho propiedades

Propiedades de transición CSS

Para crear una transición, puede usar la propiedad abreviada de transición o una combinación de las subpropiedades a continuación.

  • propiedad de transición: especifica el nombre de la propiedad CSS para la que es el efecto de transición. Entonces, por ejemplo, si esta propiedad se establece en «ancho», entonces el efecto de transición tendrá lugar cuando un usuario se desplace sobre el elemento y su ancho comience a cambiar.
  • duración de la transición: especifica el tiempo que tarda en completarse el efecto de transición.
  • función de temporización de transición: marca el ritmo del efecto de transición.
  • transición-retraso: especifica cuándo comienza el efecto de transición.

Transiciones CSS y JavaScript

Los valores de propiedad que están predefinidos en CSS pueden resultar limitantes para ciertas interacciones. En tales casos, es posible que desee recurrir a JavaScript. Pero si no desea usar JavaScript por completo, es posible configurar un enfoque híbrido.

La transición probablemente sea ideal si decide 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. Echemos un vistazo a algunos ejemplos.

Nota: los ejemplos a continuación solo se reproducen en bucle porque son GIF. Recuerde: las transiciones no se pueden repetir infinitamente.

Ejemplo de estirar al pasar el mouse

El siguiente elemento alterna entre dos estados definidos dependiendo de dónde se encuentre el mouse. Si pasa el cursor sobre el elemento, se activa la transición para que el elemento se vuelva mucho más alto pero más angosto, pareciendo estirado.

Transición CSS: elemento que se expande cuando el usuario pasa el mouse sobre él

Ejemplo de contador de barra espaciadora

En el siguiente ejemplo, la cantidad de veces que un usuario pulsa la barra espaciadora se «graba» gracias a una combinación de CSS y JavaScript. El número volverá a 0 cuando el usuario presione el botón Reiniciar.

ejemplo de transición css: contador de barra espaciadora

Fuente de imagen

Ejemplo de botón

Al pasar 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.

Ejemplo de transición de CSS: botón al pasar el mouse

Fuente de imagen

La transición de CSS no funciona

Si ha creado una transición pero no funciona según lo previsto, hay algunas soluciones rápidas que puede buscar.

1. La propiedad de transición se establece en ninguno.

Como se indicó anteriormente, la propiedad de propiedad de transición especifica el nombre de la propiedad CSS a la que se aplica la transición. Esta propiedad se puede definir mediante la palabra clave «all», que indica que se realizará la transición de todas las propiedades, o mediante una lista de propiedades que se realizarán la transición. Sin embargo, si la propiedad se establece en «ninguna», no se realizará la transición de 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 indicó anteriormente, la propiedad de duración de la transición especifica el tiempo que dura una transición. Se puede establecer en cualquier valor positivo. Si la propiedad no está definida, el valor se considerará cero segundos. El elemento seguirá cambiando de un estado al siguiente, pero el cambio será instantáneo: no se producirá ninguna animación.

Un valor negativo invalida la declaración, por lo que se supondrá 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) sobre CódigoPen.

Cuándo usar Transición vs Animación

Recapitulemos los casos de uso ideales para usar transiciones sobre animaciones:

  • Creación de movimientos sencillos de-a
  • Tener un efecto solo cuando el usuario interactúa con un elemento al pasar el mouse o hacer clic en él.
  • Usando JavaScript
  • Diseñar botones para cambiar de color o tamaño cuando el usuario pasa el mouse sobre él

Animaciones CSS

Las animaciones son más complicadas, pero también le darán más flexibilidad: cuanto más flexibles, más partes involucradas. Con las animaciones CSS, puede establecer diferentes etapas que alteran el comportamiento del elemento varias veces en su duración. Esto le da más control sobre los valores de propiedad en las animaciones.

Para hacer esto, defina un conjunto de fotogramas clave. Los fotogramas clave indican el inicio y el final de la animación, así como los pasos intermedios entre el inicio y el final. En otras palabras, cada fotograma clave describe cómo debe mostrarse el elemento animado en un momento dado durante la secuencia de animación. Puede configurar tantos fotogramas clave como desee (pero necesita al menos dos).

Con estas capacidades, puede crear animaciones HTML5 para rivalizar con las creadas por herramientas avanzadas como Flash.

Las animaciones también le permiten especificar valores de propiedad en cada fotograma clave sin tener que declararlos. El elemento cambia de comportamiento sin problemas una vez que se alcanza el fotograma clave correcto, incluso si la propiedad no figuraba en la lista al principio.

Propiedades de animación CSS

Para crear una transición, puede usar la propiedad de animación abreviada o una combinación de las subpropiedades a continuación.

Solo se requieren las propiedades animation-name y animation-duration. Si no se especifican las demás propiedades, se establecerán en sus valores predeterminados.

  • nombre-de-animación: especifica el tipo de animación, son obligatorios.
  • duración de la animación: especifica la duración de la secuencia de animación.
  • función de temporización de animación: establece el ritmo de la animación.
  • animación-retraso: especifica cuándo comienza la animación. Puede usar milisegundos o segundos, y valores positivos o negativos.
  • animación-dirección: define 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 que se reproduzca la animación.
  • recuento de iteraciones de animación: especifica el número de veces que se reproducirá la animación.
  • estado-de-reproducción-de-animación: se utiliza para pausar y reanudar la secuencia de animación.

Animaciones CSS en bucle

A diferencia de una transición, que solo se reproduce una vez después de que se activa, una animación CSS no requiere una acción de activación y se puede configurar para que se reproduzca en bucle. Puede hacer que se repita tantas veces como desee o configurarlo para que continúe para siempre. Usted hace esta especificación usando el recuento de iteraciones de animación propiedad, que le permite establecer su valor en número de segundos o infinito.

Hay una forma no tan sencilla de lograr un bucle de transición CSS jugando con el transiciónTerminar evento. Sin embargo, una animación CSS es más fácil si prefiere agregar un bucle.

Ejemplo de animación CSS

A continuación se muestra un ejemplo de una animación CSS. Hay varios estados por los que pasa el gráfico y se repite. El vapor se encoge de tamaño, asciende hacia arriba y se desvanece. Esta imagen es mucho más dinámica de lo que sería una transición CSS.

Animación CSS de una taza de café humeante

Cuándo usar animación vs transición

Recapitulemos los casos de uso ideales para usar animaciones sobre transiciones:

  • Crear series de movimientos más complejas.
  • Tener un efecto tan pronto como se carga la página
  • Solo usando CSS (sin JavaScript)
  • Diseño de superposiciones de instrucciones para una interfaz de usuario

Decidir entre transiciones y animaciones

Las transiciones y animaciones CSS tienen muchas similitudes. Sin embargo, está claro que también tienen diferencias significativas que deberían guiar 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 animación a su sitio puede atraer y deleitar a sus visitantes y hacer que regresen.

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

Nueva llamada a la acción