Haga que sus páginas web cobren vida con animaciones y transiciones CSS

Los diseños de sitios web evolucionan constantemente. Desde un diseño receptivo, una hermosa tipografía, esquemas de codificación de colores perfectos e ilustraciones, los creadores de sitios web presentan nuevas ideas y diseños todos los días.

Los usuarios de hoy en día tienen grandes expectativas de las interfaces de usuario debido al contenido de alta calidad disponible en Internet. A medida que las interfaces de los sitios web evolucionan, también lo hace la tecnología detrás de ellas. Un componente importante responsable de mejorar la interfaz del sitio web es CSS.

CSS u hojas de estilo en cascada son responsables de hacer que los sitios sean mucho más interactivos al definir su estilo, diseño y diseño. El último estándar para CSS, es decir, CSS3, ha introducido el concepto de animaciones y transformaciones que mejoran la experiencia del usuario al agregar profundidad adicional a la interfaz de usuario. Con las animaciones y transiciones CSS, puede contar historias, crear efectos lujosos y hacer que la interacción del usuario con su sitio web sea mucho más efectiva y significativa.

Una animación es solo una simulación de movimiento que se crea al mostrar una serie de objetos como imágenes, uno tras otro. La transición, por otro lado, es básicamente un proceso en el que un objeto cambia de un estado a otro. Pero, cuando hablamos de animaciones web, hay básicamente tres tipos: animaciones CSS o animaciones de fotogramas clave, transiciones CSS y animaciones JavaScript.

Animaciones CSS

Para crear animaciones en CSS, necesitamos cambiar las propiedades CSS de un elemento, como una imagen o un texto, durante un período de tiempo determinado. Podemos cambiar las propiedades de los elementos tantas veces como queramos y también podemos establecer la duración de la animación.

Especificación de @fotogramas clave

Las animaciones CSS se definen poco con fotogramas clave. Estos fotogramas clave son los puntos intermedios de la animación. Todas las animaciones CSS se especifican bajo la regla @keyframes. Estos fotogramas clave especifican lo que sucede con el elemento en un momento particular, es decir,

• qué propiedades están cambiando
• cuando el elemento anima
• cómo se anima el elemento

Puede definir su propio fotograma clave como:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Aquí ‘hasta’ y ‘desde’ especifican el inicio y el final de la animación. También podemos especificar animaciones para momentos intermedios de tiempo entre el inicio y el final así:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Aquí 0% representa el inicio de la animación, 100% representa el final de la animación y 50% significa el cambio entre el inicio y el final. Pero, ¿cómo le decimos al navegador cuánto tiempo debe durar la animación? Hacemos esto con la ayuda de ciertas propiedades de animación. Estas propiedades de animación están asociadas con el elemento a animar. Por ejemplo:

element_name
{
animation_property: value;
style_property: value;
}

Aquí el elemento podría ser cualquier etiqueta HTML como div, span, img, p, etc. y style_propertyes cualquier propiedad de estilo CSS como background_color, ancho, alto, etc. Veamos ahora algunas propiedades de animación en detalle.

1. @keyframes: los fotogramas clave se utilizan para especificar el código de animación como se explicó anteriormente.
2. animation-name: El nombre especificado con @keyframes es el nombre de la animación. Este nombre se utiliza para hacer referencia a los fotogramas clave con el elemento que se va a animar.
3. animation-duration: Se utiliza para especificar el tiempo de duración de la animación en segundos o milisegundos. Por ejemplo, si lo configuramos en 5 segundos, la animación se ejecutará solo durante 5 segundos. Si no configuramos esta propiedad, la animación no se ejecutará en absoluto ya que su valor predeterminado es 0.
4. animation-delay: podemos retrasar el inicio de la animación especificando el tiempo de retraso de la animación. Por ejemplo, si desea iniciar la animación 5 segundos después de que la página se cargue en el navegador, simplemente configure el retraso de la animación en 5 segundos.
5. animation-direction: Podemos decirle al navegador si una animación se mueve en dirección contraria o ciclos alternos con esta propiedad. Por ejemplo, si desea que la animación se ejecute de principio a fin, establezca el valor de la duración de la animación en ‘normal’. Si desea que se ejecute de principio a fin, simplemente establezca el valor en ‘reversa’.
6. modo de relleno de animación: podemos especificar el estilo del elemento cuando la animación no se reproduce con este modo, es decir, cuando la animación se retrasa o finaliza, entonces cuál debería ser el estilo del elemento.
7. animation-iteration-count: esta propiedad representa el número de veces que se puede reproducir una animación. Por ejemplo, si desea reproducir la animación una vez, configúrelo en 1, o si desea que la animación se reproduzca para siempre, simplemente configúrelo en ‘infinito’.
8. animation-timing-function: esta propiedad se utiliza para especificar la curva de velocidad de la animación como lineal, aceleración o desaceleración.
9. Animación: es la propiedad abreviada para establecer todas las propiedades de animación.

Por ejemplo, puede animar un objeto que rebota con el siguiente fragmento de código. Observe cómo se ha utilizado aquí la notación abreviada para la animación.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Transiciones

Las transiciones CSS se aplican a las propiedades de los elementos durante un cierto período de tiempo en función de ciertas funciones de temporización, también conocidas como funciones de aceleración. Por función de temporización, nos referimos a una función que cambiará las propiedades de los elementos de un estado a otro, como progresión lineal, aceleración o desaceleración. Es posible que haya notado que una imagen se desliza o se transforma en otra imagen al pasar el mouse por encima o se reproduce un sonido al hacer clic con el mouse. Todos estos son efectos de transición que pueden hacer que un sitio web sea interactivo.

Las funciones de aceleración son importantes para crear transiciones. Especifican cómo cambiarán las propiedades. También pueden alterar la velocidad a la que cambia el valor de las propiedades desde el punto de inicio hasta el punto final de una transición. Puede aplicar transiciones de la siguiente manera:

element
{
style_property: value;
transition_property: value;
}

Aquí el elemento especifica el elemento HTML que desea transformar como div, H1, img, etc. style_property es el estilo CSS aplicado en ese elemento. Veamos ahora algunas propiedades de transición :

• propiedad de transición: el efecto de transición siempre se aplicará a la propiedad CSS de un elemento, como su ancho, alto, color o forma. El valor de este atributo especifica esa propiedad CSS del elemento. El efecto de transición comenzará cada vez que esta propiedad cambie, por ejemplo, al pasar el mouse por encima o al hacer clic.
• Transition-timing-function: Esta es la función de facilidad que se aplicará al elemento. Esta propiedad se utiliza para especificar la curva de velocidad de transición, como entrada, salida, lineal, etc.
• transición-duración: es como la propiedad de duración de la animación. Se utiliza para especificar la duración del tiempo del efecto de transición en segundos o milisegundos. Por ejemplo, si lo configuramos en 5 segundos, la transición afectará y se completará en 5 segundos. Si no establecemos esta propiedad, entonces no habrá ninguna transición ya que su valor predeterminado es 0.
• Transition-Delay: Con esta propiedad, podemos especificar el tiempo de duración para retrasar el efecto de transición. Por ejemplo, si desea iniciar el efecto 5 segundos después de pasar el mouse, simplemente configure el retraso de transición en 5 segundos.
• transición: es la propiedad abreviada para configurar todas las propiedades de transición anteriores juntas.

Por ejemplo, el siguiente código cambiará el ancho del elemento div al pasar el mouse. Vea la propiedad abreviada de transición aplicada aquí.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animaciones frente a transiciones

Similitudes entre animaciones y transiciones

• Tanto la transición como la animación se utilizan para visualizar cambios en las propiedades de un elemento.
• Podemos especificar la duración de la transición y la animación.
• Tenemos ciertas funciones de tiempo para alterar la tasa de pasar de un valor a otro para transiciones y animaciones.

Diferencias entre animaciones y transiciones

• Las transiciones CSS son reactivas. Deben ser activados por los usuarios. Las animaciones, por otro lado, se ejecutan cada vez que la página se carga en el navegador. No es necesario que se activen.
• Las transiciones se ejecutan una vez y luego se detienen. Luego, tenemos que activarlos una y otra vez mientras las animaciones pueden repetirse. Pueden comenzar en su propia parada y luego comenzar de nuevo.
• El navegador se encarga de las transiciones por sí mismo. Solo necesitamos especificar el inicio y el final de la transición. Podemos establecer el efecto de transición, pero no podemos alterar la tasa de cambio de una transición intermedia. Por ejemplo, si una imagen se desliza al pasar el mouse por encima, solo veremos que se desvanece o se desvanece a medida que pasamos el mouse sobre ella.
• Las animaciones, por otro lado, brindan la flexibilidad de cambiar las propiedades entre el inicio y el final. Esto sucede con la ayuda de fotogramas clave. Por ejemplo, podemos establecer el color de una imagen en rojo durante los primeros 5 segundos, luego en azul durante los siguientes 5 segundos, luego en verde durante los siguientes 5 segundos y en amarillo durante los últimos 5 segundos de la animación. Por lo tanto, tenemos un control sobre las animaciones.

Prefijos de proveedores

Todas las funciones de CSS3 no son compatibles con todos los navegadores. Por lo tanto, usamos prefijos a lo largo de esas propiedades CSS para navegadores específicos como -webkit- (Safari), -moz- (Firefox) o -o- (Opera). Esto permite que los marcadores del navegador agreguen soporte para esa función CSS3. Estos prefijos se conocen como prefijos de proveedores o prefijos de navegador CSS. Por lo tanto, también debemos colocar prefijos de proveedores junto con las propiedades de animación y transición. Por ejemplo, considere el siguiente código y vea cómo se han utilizado los prefijos de proveedores para Safari:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

¡Consejo! Puede evitar este ajetreo utilizando bibliotecas como -prefix-free. Es una biblioteca de JavaScript que agregará el prefijo del navegador actual a cualquier código CSS. Echa un vistazo a muchas de estas bibliotecas disponibles en la web.

Conclusión

Los desarrolladores de sitios web pueden aplicar animaciones y transformaciones para atraer usuarios a sus sitios web. Puede usarlos para mejorar formularios, notificaciones, gráficos de fondo, imágenes, tablas, garabatos, botones de llamada a la acción y más. Simplemente use su imaginación y puede encontrar una manera de sorprender a sus usuarios. Recuerde que incluso un pequeño cambio en su sitio web puede hacer que se vea mucho mejor y aumente su valor. Entonces, ¿ya ha utilizado animaciones en su sitio web? Comparta sus pensamientos sobre el uso de animaciones y transiciones.