Ejemplos de transición de CSS: cómo usar la animación de desplazamiento, cambiar la opacidad y más

Programación

Si está trabajando con tecnologías web como CSS, HTML y JavaScript, es importante tener algunos conocimientos básicos sobre animaciones y transiciones CSS.

En este artículo vamos a aprender cómo hacer algunas animaciones de transición básicas usando CSS.

Cómo animar un elemento con transición básica al pasar el mouse

En este ejemplo, haremos que la opacidad de un elemento cambie cuando un usuario pase el mouse o pase el mouse sobre el elemento.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; }

Esta es una transición simple que se puede activar cuando pasamos el cursor sobre el elemento. Podemos agregar más de una transición que se ejecutará al mismo tiempo.

Agreguemos una propiedad de transformación de escala para agregar una transición de escala al elemento.

 .elem:hover { transform: scale(1.1); }

Pero la transición no parece ser suave, porque no definimos la duración de la transición ni usamos ninguna función de sincronización.  

Si agregamos la transitionpropiedad, hará que el elemento se mueva más suavemente.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Analicemos cómo funciona la propiedad de transición:

 transition: 500ms linear;
  • 500ms: la duración de la transición en milisegundos
  • linear: la función de sincronización
div { transition:    ; }

Podemos agregar más opciones como a continuación (ejemplos del MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

Entonces, ¿qué hace este código?

  • transición-propiedad: la propiedad que desea animar. Puede ser cualquier elemento de CSS como background, height, translateY, translateX, y así sucesivamente.
  • duración de la transición: la duración de la transición
  • retraso de transición: el retraso antes de que comience la transición

Puede obtener más información sobre los diferentes usos de transitionCSS aquí.

Cómo hacer que las transiciones sean más interactivas usando la propiedad de animación y los fotogramas clave

Podemos hacer más con las transiciones CSS para que esta animación sea más creativa e interactiva.

Cómo mover un elemento con fotogramas clave

Veamos un ejemplo donde el elemento se mueve del punto A al punto B. Usaremos translateX y translateY.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

Y esto es lo que obtenemos:

Esta vez usamos nuevas propiedades como animación y fotogramas clave. Usamos la animationpropiedad para definir el nombre y la duración de la animación, y los fotogramas clave nos permiten describir cómo debe moverse el elemento.

 animation: moveToRight 2s ease-in-out;

Aquí nombré la animación moveToRight, pero puedes usar el nombre que quieras. La duración es 2sy ease-in-outes una función de tiempo.

Hay otras funciones de temporización que se pueden utilizar como ease-in, linear, ease-outque básicamente hacen que el más suave animación. Puede obtener más información sobre las funciones de temporización aquí.

@keyframestoma el nombre de la animación. En este caso es moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesejecutará la animación en múltiples pasos. El ejemplo anterior usa un porcentaje para representar el rango o el orden de las transiciones. También podríamos usar los métodos fromy to. como abajo"

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from representa el punto de partida o el primer paso de la animación.

to es el punto final o el último paso de la animación que se ejecutará.

Es posible que desee utilizar un porcentaje en algunos casos. Por ejemplo, digamos que desea agregar más de dos transiciones que se ejecutarán en una secuencia, como la siguiente:

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Podemos ser más creativos y animar muchas propiedades al mismo tiempo como en el siguiente ejemplo:

Puedes jugar con propiedades y técnicas de animación en el sandbox aquí:

Son muchas más cosas que podemos hacer con fotogramas clave. Primero, agreguemos más transiciones a nuestra animación.

Cómo animar más propiedades e incluirlas en la transición

Esta vez animaremos el fondo, y haremos que el elemento se mueva en un patrón cuadrado. Haremos que la animación se ejecute para siempre usando la infinitepropiedad como función de tiempo.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } }

Vamos a analizarlo. Primero agregamos infinitepara que la animación se ejecute para siempre.

animation: moveToLeft 5s linear infinite;

Y luego dividimos la animación en cuatro pasos. En cada paso, ejecutaremos una transición diferente y toda la animación se ejecutará en una secuencia.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient. 
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

Después de aprender lo básico de las animaciones CSS, es posible que desee ir más allá y hacer cosas más complejas que requieran la interacción del usuario. Para esto, puede usar JavaScript o cualquier biblioteca de animación de terceros.

Hola, mi nombre es Said Hayani. Creé subscribi.io para ayudar a los creadores, bloggers e influencers a hacer crecer su audiencia a través del boletín.