Explicación de las transiciones CSS

La forma más simple (y directa) de animar sus componentes es a través de transiciones CSS. En este artículo, aprenderá cómo funcionan las transiciones CSS y cómo crear animaciones con ellas.

Se produce una transición cuando una propiedad CSS cambia de un valor a otro durante un período de tiempo.

Puede crear transiciones CSS con la transitionpropiedad:

.selector { transition: property duration transition-timing-function delay; }

La transitionpropiedad es una abreviatura de cuatro propiedades CSS, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyse refiere a la propiedad CSS que desea realizar la transición. Se requiere en la transitiontaquigrafía.

transition-durationse refiere a la duración de la transición. ¿Cuánto tiempo quieres que dure la transición? Este valor se escribe en segundos con el ssufijo (me gusta 3s). También se requiere en la transitiontaquigrafía.

transition-timing-functionse refiere a cómo ocurre la transición. Aprenderá más sobre esto más adelante.

transition-delayse refiere al tiempo que desea esperar antes de comenzar la duración. Este valor se escribe en segundos con el ssufijo (como 3s). transition-delayes opcional en la transitiontaquigrafía.

Activar transiciones

Puede activar transiciones CSS directamente con pseudo clases como :hover(se activa cuando el mouse pasa sobre un elemento), :focus(se activa cuando un usuario presiona un elemento o cuando un usuario hace clic en un elemento de entrada), o :active(se activa cuando el usuario hace clic en el elemento ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

También puede activar transiciones CSS a través de JavaScript agregando o eliminando una clase.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Entendiendo la función de tiempo de transición

El transition-timing-functiongobierna cómo se produce una transición. Todas las transiciones tienen un valor linearpredeterminado de, lo que significa que la propiedad cambia de manera uniforme hasta el final de la transición.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

La cuestión es que pocas cosas se mueven linealmente en la vida. No es así como se mueven los objetos reales. A veces, aceleramos; a veces, desaceleramos. El transition-timing-functionte permite capturar todo eso.

Imagínese lanzando una pelota de tenis a un campo abierto. La pelota sale de tu mano con la máxima velocidad. A medida que se mueve, pierde energía, desacelera y finalmente se detiene. A esto se le llama ease-out. Tiene una función de sincronización.

.selector { transition-timing-function: ease-out; }

Ahora imagina que estás en un coche. No se mueve en este momento. Cuando mueves el coche, acelera y alcanza su velocidad máxima. A esto se le llama ease-in. También tiene una función de sincronización.

.selector { transition-timing-function: ease-in; }

Dado que tiene ease-iny ease-out, también hay una función de sincronización que combina los dos juntos ease-in-out,. (Aconsejo no usar ease-in-outen sus transiciones a menos que sus transiciones duren más de un segundo. Nada entra y sale fácilmente en un segundo. Simplemente se ve extraño).

.selector { transition-timing-function: ease-in-out; }

Vea este lápiz para ver una demostración de las funciones de temporización que ha aprendido hasta ahora:

Finalmente, si no le gusta ninguna de las opciones anteriores, puede crear su propia función de temporización con cubic-bezier.

Creando su propia función de sincronización con cubic-bezier

Un Cubic-bezier es un conjunto de cuatro valores que determinan su función de tiempo de transición. Se parece a esto:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

No se preocupe por el x1, y1,, x2y y2. Nunca creará curvas bézier cúbicas escribiendo números usted mismo (a menos que ya sepa lo que significan y esté ajustando su función de sincronización para lograr la perfección).

Puede confiar en las confiables herramientas de desarrollo de Chrome y Firefox para ayudarlo a crear sus curvas. Para usarlo, agrega un transition-timing-functionen un elemento, luego abre devtools y hace clic en la función de sincronización.

Consulte las funciones de tiempo de transición de CSS de la pluma de Zell Liew (@zellwk) en CodePen.

Profundizar en la creación de sus propias curvas Bézier para sus animaciones está fuera del alcance del artículo de hoy. Si está interesado, puede encontrar más información sobre las curvas cúbicas-bezier en "Comprensión de las funciones de sincronización CSS" por Stephen Greig.

Transición de dos o más propiedades

Puede realizar la transición de dos (o más) propiedades CSS separándolas con una coma en su propiedad transitiono transition-property.

También puede hacer lo mismo con la duración, las funciones de sincronización y los retrasos. Si los valores son los mismos, solo necesita especificar uno de ellos.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

Puede tener la tentación de realizar la transición de todas las propiedades CSS con all. Nunca hagas esto. Esto es malo para el rendimiento. Siempre especifique la propiedad que está intentando realizar la transición.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Transición de entrada vs transición de salida

A veces, desea que las propiedades entren y salgan de manera diferente. Quieres que la duración, la función de temporización o el retraso sean diferentes.

Para hacerlo, escribe otro conjunto de transition-propiedades.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Remember to change your transition-timing-function so your animation looks more real!

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. )

Originally published at zellwk.com.