Cómo usar transiciones y animaciones CSS3 para resaltar los cambios en la interfaz de usuario

Los diseñadores y artistas tienen una larga historia de experimentación con movimiento, efectos y diferentes tipos de ilusiones con el objetivo de agregar una capa adicional a su trabajo. El movimiento del arte op comenzó a usar ilusiones ópticas en la década de 1960 para dar la impresión de movimiento.

Desde entonces, han aparecido nuevos y más nuevos enfoques, como el arte cinético recientemente popular que amplía la perspectiva del espectador mediante el uso del movimiento multidimensional. El movimiento también apareció en informática con la invención del primer cursor parpadeante en 1967.

En el desarrollo de aplicaciones para el usuario, los elementos de DOM solían estar animados por JavaScript antes de que se lanzara CSS3, y es un método que aún funciona, pero Las nuevas propiedades introducidas por CSS3 nos permiten mejorar nuestros diseños. Con diferentes efectos y movimientos. de una manera más intuitiva.

Las dos técnicas principales que ofrece CSS3 son transiciones y animaciones. En esta publicación, veremos qué son, cuál es la diferencia entre ellos y cómo puedes usarlos..

Transiciones

Las transiciones y animaciones se utilizan para visualizar cambios en el estado de un elemento HTML por Modificar una o más de sus propiedades CSS..

La forma más simple de visualización de cambio de estado es alterar el color de un botón o un enlace cuando se mantiene activado. Cuando sucede, el elemento obtiene un estilo ligeramente diferente, que el espectador suele notar como si algo se hubiera movido en la pantalla..

Cambiar las propiedades CSS de un enlace al pasar el cursor (o enfocar, o hacer clic) es la forma más antigua y simple de transiciones, y existió mucho antes de la era CSS3..

 a color: naranja;  a: hover color: rojo;  a: focus color: blue;  a: visitó color: verde; 

Las transiciones se utilizan cuando un elemento HTML cambia de un estado predefinido a otro. CSS3 introdujo nuevas propiedades que permiten visualizaciones más sofisticadas que antes, como funciones de temporización o control de duración.

Veremos las nuevas propiedades de CSS en la siguiente sección, después de entender cómo difieren las animaciones. Por ahora, veamos las cosas más importantes que necesita saber acerca de las transiciones.

1. Siempre tienen un principio y un estado final..
2. Los estados entre los puntos inicial y final están definidos implícitamente por el navegador, no podemos cambiar eso con CSS.
3. Ellos requieren activación explícita, como agregar una nueva pseudoclase por CSS, o una nueva clase por jQuery.

A continuación, puede ver un hermoso ejemplo de transiciones CSS3 utilizadas de manera inteligente, en las que el autor revela información oculta de una manera que no es intrusiva pero que sigue orientando la atención de los usuarios hacia el nuevo contenido..

Animaciones

Si queremos visualizar los cambios de estado con movimientos más complicados, o si no tenemos un disparador explícito, por ejemplo. Si queremos iniciar el efecto cuando se carga la página, las animaciones son el camino a seguir..

Las animaciones permiten definir una ruta más compleja configurando y configurando las nuestras. fotogramas clave. Fotogramas clave Son puntos intermedios en el curso de la animación, que nos permiten cambiar el estilo del elemento animado tantas veces como queramos..

Si bien CSS3 ofrece excelentes formas de crear animaciones sofisticadas, generalmente es más difícil crearlas que las transiciones, por eso hay muchas bibliotecas de animación excelentes que pueden facilitar nuestro trabajo..

Las cosas más importantes que necesita saber sobre las animaciones CSS3 incluyen:

1. no requieren activación explícita, pueden comenzar con la carga de la página o cuando se produce otro evento DOM en el navegador
2. se pueden usar en los casos en que se usan transiciones, por ejemplo, cuando se agrega o se elimina una nueva clase o seudoclase (aunque es un caso de uso menos frecuente)
3. nos obligan a definir algunos fotogramas clave (estados intermedios)
4. Podemos especificar el número, la frecuencia y el estilo de estos fotogramas clave.

En el siguiente ejemplo, puedes ver un menú desplegable animado genial. La animación comienza cuando hacemos clic en el botón. Esto se logra agregando clases extra a los elementos de la lista con jQuery cuando ocurre el evento click.

Estas nuevas clases están animadas con especificados. @keyframes Reglas en el archivo CSS. JQuery elimina las clases adicionales cuando el usuario hace clic en el botón la próxima vez y el menú se vuelve a ocultar..

Propiedades de CSS y el @keyframes En regla

Para las transiciones podemos usar cualquiera de los dos transición propiedad abreviada, o 4 propiedades individuales relacionadas con la transición: propiedad de transición, duración de la transición, función de tiempo de transición, y retraso de transición. La propiedad abreviada contiene todas las propiedades individuales en forma abreviada.

Para animaciones hay la animación propiedad abreviada en nuestras manos que representa nada menos que 8 propiedades de animación únicas, a saber, nombre de la animación, duración de la animación, función de tiempo de animación, animación-retraso, animación-iteración-cuenta, animacion-direccion, modo de relleno de animación, y animación-play-state.

Lo más importante con ambas transiciones y animaciones es que siempre es necesario especificar las propiedades CSS que se modificarán durante el cambio de estado. Con las transiciones se ve así:

 .elemento fondo: naranja; propiedad de transición: fondo; duración de la transición: 3s; función de tiempo de transición: facilidad de entrada;  .element: hover background: red; 

Especificamos el fondo propiedad, porque esto es lo que se cambiará durante la transición.

Podemos alterar más de una propiedad CSS en una transición, en este caso, el código anterior se modificaría así: propiedad de transición: fondo, borde;. También podemos utilizar el propiedad de transición: todos;, Si no queremos especificar cada propiedad por separado..

Podemos elegir la taquigrafía. transición propiedad también. Si lo hacemos, siempre debemos prestar atención al orden correcto de las propiedades internas (consulte la sintaxis en los documentos).

 .elemento fondo: naranja; transición: fondo 3s facilidad de entrada;  .element: hover background: red; 

Si queremos crear una animación, estamos obligados a especificar las fotogramas clave. Las propiedades de CSS necesitan ser modificadas por separado definidas @keyframes reglas de juego Aquí hay un ejemplo de cómo podemos hacer esto:

 .elemento posición: relativo; Nombre de la animación: diapositiva; animación-duración: 3s; función de temporización de animación: facilidad de entrada;  @keyframes slide 0% left: 0;  50% izquierda: 200px;  100% izquierda: 400px; 

En el ejemplo anterior creamos un efecto deslizante muy simple. Definimos la nombre de la animación, luego enlazamos 3 fotogramas clave a él, que especificamos en el @keyframes slide … reglas de juego Los porcentajes se refieren a la duración de la animación, por lo que el 50% ocurre a 1.5 s en el ejemplo.

Podríamos usar la taquigrafía animación propiedad también, o podría definir los fotogramas clave con el más simple de a Gobierne de la siguiente manera:

 .elemento posición: relativo; animación: diapositivas 3s facilidad de entrada;  @keyframes slide from left: 0;  a izquierda: 400px; 

La creación de animaciones más complejas es su propia forma de arte. Si está interesado, puede leer dos de nuestros tutoriales de animación sobre cómo crear una marquesina avanzada y cómo crear un efecto de rebote..

Al construir transiciones y animaciones, necesitas saber que No todas las propiedades CSS pueden ser animadas, por lo que siempre es una buena idea verificar la propiedad que desea cambiar en el CSS Animatable.

Las animaciones y transiciones de CSS3 funcionaron durante mucho tiempo con los prefijos de los proveedores, que no tenemos que usar más, sin embargo, la Red de Desarrolladores de Mozilla todavía recomienda agregar -webkit prefijo por un tiempo, ya que el soporte para navegadores basados ​​en Webkit solo recientemente logró estabilidad.