Hoy en día las animaciones en los sitios web van mucho más allá de los simples detalles, algunas marcas tienen su marca registrada en las animaciones, al igual que el propio Google después de su último rebrand.
Abordaremos técnicas sobre cómo hacer animaciones a través de CSS y al final dejaré un dato sobre cómo puedes tener ideas para llevar animaciones como la del logotipo de Google a una página web.
En la web, se pueden animar muchas cosas, básicamente todo lo que posee etapas. Ya sea un formulario de registro cuando cambiamos entre fases, un producto que se agrega a un carro de campos, la aparición de partes de la página según un scroll. En la práctica, la mayoría de estas animaciones ocurre después de que el usuario realiza una acción.
Con eso en mente, exploremos la propiedad transition
que si se usa junto con los seudo selectores:hover
y :focus
del CSS.
En la práctica el transition
se puede aplicar a todos los valores que cambian entre los estilos estándares de un elemento y alguna variación aplicada, ya sea a través de alguna acción de seudo selector (:hover y :focus) o por algún atributo o clase que se agrega a una tag y exista un selector CSS aplicando alguna variación de estilo.
Solo se pueden animar valores cuantificables. Esto significa que no es posible hacer una animación de display pasando de none a block, sino de opacity de 0 a 1;
Centrándonos en la idea de que las Animaciones son intercambios de estados donde podemos visualizar cómo algo pasó del punto A a un punto B, animar el background es solo una posibilidad, podemos manipular el ancho y alto de los elementos, su posición en la página y una propiedad que coincide súper bien con el transition es el transform
.
Como el transform puede aplicar diferentes comportamientos a un elemento como cambiar su escala, cambiar su posición en la página o incluso aplicar una distorsión con skew()
esto abre toda una gama de posibilidades.
transition: 1s;
: aplica una animación de 1 segundo a TODAS las propiedades de un selector, es importante especificar qué propiedades se animarán para evitar algunos problemas de desempeño o propiedades desnecesarias al consumir recursos en animaciones (que normalmente pueden exigir mucho de computadoras de usuarios con hardware menos potentes).transition: transform 1s, opacity 0.3s;
: Aplica una animación de 1 segundo para la propiedad transform
, y una de 0,3 segundos para el opacity. Todas las demás propiedades no se ven afectadas.transition-delay
, además de especificar la duración y las propiedades a través de propiedades independientes, a diario terminamos usando la forma de los ejemplos anteriores, pero, recomiendo que veas en MDN cómo trabajar con estas variacionesComo vimos anteriormente, para animar algo con transition, dependemos de alguna acción del usuario; ahora, ¿y si queremos que la animación ocurra sola de forma continua?
Tenga en cuenta que eso es muy similar a algunos ítems que existen para atraer la atención, como flechas que indican que se puede pulsar en algún punto en algunos sitios. Para que esto sea posible estamos utilizando la propiedad animation
.
Para entender cómo hacer una animación así, primero debemos comprender la idea de trabajar con keyframes
. Básicamente definiremos que dado un intervalo de tiempo entre el inicio y el final del mismo se aplicarán determinadas propiedades CSS.
@keyframes go-back {
0% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
Y para asociar estos keyframes con un elemento HTML, necesitamos agregar esta animación go-back
, o cualquier otra, por medio de la propiedad animation:
.cuadrado {
animation: go-back 1s;
}
Pero, de esta forma la animación solo ocurre una vez, si estamos interesados en que suceda infinitamente podemos agregar la propiedad animation-iteration-count: infinite;
en lugar de infinite, podemos pasar un número máximo de veces que nuestra animación se repetirá, y si quisieras hacer que la animación vaya hacia adelante y hacia atrás desde el punto final hasta el principio y viceversa, simplemente agrega la propiedad animation-direction: alternate;
.
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border: 2px solid #999;
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Como vimos anteriormente, es posible tener varios niveles de control en animaciones con CSS, sin embargo, en caso de que desee tener un control más preciso a través de JavaScript por medio de un elemento.addEventListener
es posible monitorear cuando termina una transition o animation:
Esta publicación es más introductoria, pero todavía creo que vale la pena mencionar que trabajar con el desempeño en animaciones puede requerir un poco de conocimiento de cómo funciona el navegador, y un poco de cómo funciona el CSS en navegadores.
Ya te adelanto que hay una propiedad que puede obrar milagros en algunos casos para mejorar el desempeño de las animaciones, pero que sólo debería usarse en último caso:
Si encuentra alguna animación que realmente obstaculice la experiencia del usuarios en devices menos potentes, puede deshabilitarla utilizando @prefers-reduce-motion.
Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Puedes realizar el pago de tus planes en moneda local en los siguientes países:
País | |||||||
---|---|---|---|---|---|---|---|
Plan Semestral |
485.97
BOB |
66428.68
CLP |
275211.34
COP |
65.90
USD |
261.31
PEN |
1205.66
MXN |
2680.29
UYU |
Plan Anual |
736.71
BOB |
100701.44
CLP |
417202.02
COP |
99.90
USD |
396.13
PEN |
1827.70
MXN |
4063.15
UYU |
Acceso a todos
los cursos
Estudia las 24 horas,
dónde y cuándo quieras
Nuevos cursos
cada semana