Mejora tu sitio web con estos consejos y trucos de animación.
Las animaciones y las transiciones son una parte importante del diseño web. Agregar animaciones sutiles a su página web la hará más atractiva. Las animaciones simples como íconos animados, tipografía cinética y logotipos animados pueden ayudar a mejorar la experiencia del usuario. Aprende cinco increíbles trucos de animación que pueden ayudarte a darle vida a tu sitio web.
1. Transformar un elemento al pasar el mouse
Una práctica de diseño común es tener un elemento que se amplíe cuando se interactúe con él. Por ejemplo, es posible que desee traducir los botones un poco hacia arriba cuando alguien pasa el mouse sobre ellos. Puedes lograr esto usando el CSS transformar propiedad.
Suponiendo que tienes un botón:
<botón>
Haz click en mi
botón>
Diseñó el cuerpo del documento, así como el botón:
/* Alinea el botón al centro de la página */
cuerpo {
mostrar: doblar;
altura: 100vh;
alinear elementos: centro;
justificar-contenido: centro;
color de fondo: negro;
}/* Da estilo al botón */
botón {
relleno: 1ellos 2ellos;
fondo: azul;
borde: 0;
color: blanco;
borde-radio: 0.25 rem;
cursor: puntero;
tamaño de fuente: 2movimiento rápido del ojo;
transición: transformar 500EM;
}
/* Estados flotantes */
botón:flotar,
botón:enfocar {
transformar: traducirY(0.75 rem) 500EM;
}
Con el último bloque, está configurando los estados de desplazamiento y enfoque en el botón. En ambos estados, traslada el botón a lo largo del eje Y en 0,75 rem. El botón se vería así:
Cuando pasa el mouse sobre el botón, se desplaza hacia arriba. La transición tarda medio segundo (500 ms) en completarse. Este es un patrón que puede implementar no solo en sus botones, sino también en otros elementos (por ejemplo, imágenes).
2. Declarar varios fotogramas clave con una declaración
Otro patrón común en las animaciones CSS es iterar sobre el mismo valor varias veces. Esto podría ser un color, tamaño u orientación específicos. Puede lograr esto utilizando Animaciones de fotogramas clave CSS declarando varios fotogramas clave con una sola declaración.
Considere el botón que creó en la sección anterior. Tal vez desee iterar sobre varios colores de fondo al hacer clic en el botón. Pero también desea repasar el mismo color en diferentes etapas de la animación. Veamos cómo lograr eso en el código.
Primero, desea animar el botón solo cuando se hace clic. Así que crearías un guión.js archivo, dentro del cual accede al botón y alterna una clase en el botón cuando se hace clic en él:
constante botón = documento.querySelector("botón")
botón.addEventListener("hacer clic", (e) => {
botón.classList.toggle('tiempo de fiesta')
})
Usamos querySelector para acceder al botón desde la página web. Para obtener más información sobre el cruce de DOM, lea nuestra publicación sobre cómo atravesar el DOM usando JavaScript.
El tiempo de fiesta la clase activa una animación titulada fiesta:
.tiempo de fiesta {
animación: fiesta 2000EMinfinito;
}
Para la animación, desea comenzar con el rojo y hacer la transición al amarillo al 25 %. Luego volverías al rojo al 50 % antes de volver al amarillo al 75 %. Finalmente, al 100%, te conformarías con un color azul oscuro:
@fotogramas clave fiesta {
0%, 50% {
color de fondo: rojo;
}
25%, 75% {
color de fondo: amarillo;
}
100% {
color de fondo: hsl(200, 72%, 35%);
}
}
Este enfoque es bastante útil para alternar entre colores en un fondo basado en colores. Debido a que puede repetir varios fotogramas clave en una variable, se vuelve muy fácil usar la misma propiedad en diferentes etapas de su animación.
3. Uso de @property para animar propiedades personalizadas
Como ya sabrá, no todas las propiedades en CSS son animables. El oficial Documentación de Mozilla mantiene un registro actualizado de todas las propiedades CSS animables. Si está buscando animar una propiedad que no se puede animar, entonces su mejor solución sería usar el @propiedad directiva.
Comience cambiando el color de fondo de su botón a un degradado lineal:
botón {
// otroCSS
fondo: gradiente lineal(90grado, azul, verde);
// otroCSS
}
Aquí está la salida:
A menudo querrá animar el degradado de color en el botón. Si bien hay trucos que puede usar para mover su degradado, en realidad no puede animarlo. Esto es porque fondo (así como imagen de fondo) no es una propiedad animable. Aquí es donde @propiedad viene en.
El @propiedad directiva le permite registrar propiedades personalizadas. cuando usas @propiedad, debe proporcionarle tres valores, a saber sintaxis, hereda, y valor inicial:
@propiedad --color-1 {
sintaxis: "<color>";
hereda: verdadero;
valor inicial: rojo;
}
@propiedad --color-2 {
sintaxis: "<color>";
hereda: verdadero;
valor inicial: azul;
}
La primera es la propiedad de inicio mientras que la segunda es la propiedad de destino. Ahora, en lugar de hacer la transición de una imagen de fondo (que no puede hacer la transición), haría la transición de --color-1 a --color-2 (sus propiedades personalizadas) en un segundo:
botón {
transición: --color-1 1000EM, --color-2 1000EM;
}
Esta técnica es útil porque también puede agregar otras personalizaciones. Por ejemplo, agrega un retraso para darle una experiencia más fluida. Las posibilidades son infinitas.
4. Uso de retrasos de animación negativos
Los retrasos en la animación son cruciales para crear animaciones fluidas. Veamos un ejemplo de eso en acción. En esta parte, agregue un división elemento con 15 puntos encima del botón:
<divisiónclase="puntos">
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
<divisiónclase="punto">división>
división>
Aquí hay algunos estilos básicos para transformar a cada niño. división en un punto:
.puntos {
mostrar: doblar;
brecha: .5rem;
margen inferior: 20píxeles;
}
.punto {
ancho: 10píxeles;
relación de aspecto: 1;
color de fondo: rojo;
borde-radio: 50%;
}
Aquí usamos Flexbox para colocar los puntos en una línea horizontal. Para profundizar en Flexbox, puede consultar nuestro Tutorial de caja flexible de CSS.
Adentro guión.js, agregue el código que activa la animación de los puntos. Estás alternando el bailar clase en los puntos:
botón.addEventListener("hacer clic", (e) => {
botón.classList.toggle('tiempo de fiesta')
// Nuevo código
puntos.paraCada((punto) => {
dot.classList.toggle('bailar')
})
})
La clase de baile activa una animación titulada elevar:
.punto.bailar {
animación: elevar 2000EMinfinitoalterno;
}En cuanto a la animación, simplemente traduzca los puntos -100px a lo largo del eje Y:
@fotogramas clave elevar {
100% {
transformar: traducirY(-100px)
}
}Ahora es el momento de hacer algo interesante. En lugar de que los puntos se eleven al mismo tiempo, desea animar los puntos para que fluyan como una ola. Para lograr esto, debes agregar animación-retraso a los puntos, e incrementa cada punto en 100 ms:
.punto:nth-hijo (1) {
animación-retraso: 100EM;
}
.punto:nth-hijo (2) {
animación-retraso: 200EM;
}
.punto:nth-hijo (3) {
animación-retraso: 300EM;
}
.punto:nth-hijo (4) {
animación-retraso: 400EM;
}
/* Sigue haciéndolo hasta llegar al punto 15 */
Esto crea una animación elegante donde los puntos se mueven hacia arriba y hacia abajo en forma ondulada. La siguiente imagen captura los puntos en el medio de la animación:
Tenga en cuenta que esto puede ser problemático, lo que nos lleva al quinto consejo.
5. Use prefers-reduced-motion para habilitar las preferencias
Siempre tenga en cuenta que a mucha gente no le gustan las animaciones basadas en movimiento. De hecho, la mayoría de los usuarios tienen preferencias en el navegador que pueden desactivar el movimiento. El movimiento puede distraer los sentidos y, en casos graves, provocar náuseas.
Afortunadamente, puedes encargarte fácilmente de esto envolviendo tu animación dentro de un sin preferencias consulta de medios así:
@medios de comunicación(prefiere-movimiento-reducido: sin preferencia) {
.punto.bailar {
animación: elevar 2000EMinfinitoalterno;
}
}Ahora, si tuviera que habilitar prefiere-movimiento-reducido en su navegador, entonces la animación no se ejecutaría.
Más información sobre consejos y trucos de CSS
CSS está lleno de increíbles trucos que van más allá de las animaciones y las transiciones. Por ejemplo, hay consejos y trucos para hacer que todo su diseño sea elegante y receptivo. Las prácticas pueden ayudarlo a hacer que su sitio web sea más atractivo, accesible y agradable de navegar. Si quieres ser uno de los principales desarrolladores de CSS, tener un par de trucos bajo la manga es de gran ayuda.