En nuestro equipo, llevamos a límite “clases magistrales” cada pocas semanas, para compartir conocimientos con todo el equipo.
Similar a la publicación de Robin sobre conceptos básicos de expresiones regulares, aquí está el contenido de la clase ejemplar sobre «animaciones CSS» que acabo de presentar al equipo.
Tabla de Contenidos
Los fundamentos
Un ejemplo simple de «transformación»:
.btn:hover
transform: translateY(-40px);
Esto simplemente salta de una posición a otra sin animación. Pero muestra cómo ha traducido estados usando CSS.
Anexar transición para sumar animación hará que el cambio de estado se anime.
transition: transform 250ms;
Las transiciones requieren dos títulos, nombre de propiedad y duración. El nombre de la propiedad es la propiedad CSS que le gustaría animar.
Puede sumar varios con una sintaxis separada por comas
transition: transform 250ms, opacity 400ms;
Esto le permite ser específico con las propiedades que desea que el navegador anime y proporcionar atributos únicos para cada una. En el ejemplo precursor, la duración es diferente entre la transformación y la opacidad.
Hay una propiedad comodín peculiar señal «todos». Esta propiedad es un comodín para todas las propiedades CSS. Puede ser tentador usar «todos», pero no se recomienda, ya que a medida que su producto evoluciona, es probable que usted (o alguno de su equipo) termine actualizando este código en algún momento en el futuro. Dando como resultado una animación inesperada o un rendimiento deficiente.
Funciones de cronometraje
los transition-timing-function define la precipitación en la límite de tiempo de la animación.
- Facilitarse: entra rápido y se relaja al final. Se usa comúnmente cuando poco ingresa desde fuera de la pantalla.
- facilidad en: entra y luego acelera. Útil cuando se mueve poco más allá de los límites de la ventana gráfica.
- facilidad de entrada y salida: es una combinación de las dos funciones de temporización anteriores. Debe utilizarse para medios de tirabuzón.
- facilidad: tiene una pequeña cantidad de precipitación y mucha deceleración. El valía predeterminado, que es bueno como bueno en muchos casos. Principalmente cosas que permanecen adentro de la ventana gráfica.
- La función de temporización personalizada se puede proporcionar con una función de bezier cúbico, que toma cuatro números, que representan dos puntos de control. Siéntete exento de retar con cubic-bezier.com.
Rendimiento de animación
Para persistir las animaciones a 60 fps, el navegador tiene 16,6 ms para calcular y retornar a pintar. Si el navegador no puede hacer eso en esa cantidad de tiempo, su animación parecerá inestable.
Algunas propiedades de CSS son muy caras, por ejemplo, la mérito, ya que tiene un propósito en prisión al mover otros medios.
Otros son poco caros, por ejemplo, background-color. Esto no afecta el diseño, pero es necesario retornar a pintar cada cuadro, lo que no es económico.
Las dos propiedades que son muy baratas de animar son transform y opacity. Si una animación modifica actualmente una propiedad como el pancho o la izquierda, se puede mejorar moviéndola a una transformación.
Aceleracion de hardware
Cuando animas el transform o opacity propiedades de un hábitat. El navegador intentará optimizar la animación transfiriendo todo a la GPU como una textura.
Esto puede resultar en una representación sutilmente diferente, especialmente trascendente en el texto. Cuando la animación llega al final, el hábitat se devuelve a la CPU para renderizarlo y puede causar un movimiento no deseado.
will-change al rescate. Esta propiedad nos permite indicarle al navegador que vamos a animar este hábitat y que debería optimizarlo para este caso.
will-change: transform;
La GPU manejará el renderizado todo el tiempo, por lo que ya no cambiará de CPU a GPU y al contrario.
Retrasos
Los retrasos de la animación definen el tiempo que aplazamiento la animación ayer de comenzar. Esto suele ser útil cuando se animan varios medios y desea espaciar las animaciones en una límite de tiempo.
animation-delay: 2s;
Respetando las preferencias de movimiento
Las preferencias de movimiento son una configuración a nivel de sistema activo. Los usuarios pueden rotar para expresar su preferencia por menos movimiento. Apliquemos esas lecciones aquí, desactivando animaciones para aquellos que solicitan que se reduzcan:
@media (prefers-reduced-motion: reduce)
.btn
transition: none;
Fotogramas secreto
Puede crear sus propias animaciones con mucho más control utilizando los fotogramas secreto de animación.
@keyframes infinite-spinner
from
transform: rotate(0deg);
to
transform: rotate(360deg);
Para aplicar esta animación a un hábitat:
.animate
animation: infinite-spinner 2s infinite forwards;
Una propiedad de animación requiere un nombre de animación y una duración. Si los títulos opcionales interesantes son:
animation-fill-modeque define qué títulos aplica una animación fuera del tiempo en que se está ejecutando. Por ejemplo, los reenvíos dejan el hábitat al final de la animación en punto de devolverlo al principio, que es el comportamiento predeterminado.steps: La función steps () controla exactamente cuántos fotogramas secreto se mostrarán en el intervalo de tiempo de la animación.
