En los últimos años, ha habido muchas discusiones y experimentos. animación impulsada por desplazamiento. Esta es definitivamente una característica muy brillante y se convertirá en la base una vez que sea compatible con Firefox (sin bandera). es parte de Interoperabilidad 2026por lo que debería ser relativamente rápido. Esencialmente, una animación basada en desplazamiento Posición de la línea de tiempo de la animación a un posición de desplazamientoasí que si te desplazas al 50%, también estarás poniendo un 50% de animación y son muy fáciles de configurar.
Veo mucho interés en el nuevo CSS. corner-shape Lo mismo ocurre con las propiedades, aunque de momento sólo funciona en Chrome. Esto nos permite crear esquinas menos redondeadas o nada redondeadas, lo que permite algunas formas interesantes Crea con poco o ningún esfuerzo. Lo que es más interesante es corner-shape Es matemático, por lo que es fácil de animar.
Así que saluda al controlador de desplazamiento. corner-shape Animación (requiere Chrome 139+ para funcionar correctamente):
corner-shape en breve
Realmente rápido – diferentes valores corner-shape:
corner-shape Palabras clave |
superellipse() igual |
|---|---|
square |
superellipse(infinity) |
squircle |
superellipse(2) |
round |
superellipse(1) |
bevel |
superellipse(0) |
scoop |
superellipse(-1) |
notch |
superellipse(-infinity) |
pero que es esto superellipse() Función ¿Por todas partes? Bueno, básicamente, estos valores de palabras clave son el resultado de esta función. Por ejemplo, superellipse(2) Las esquinas creadas no son del todo cuadradas, pero tampoco del todo redondas (“squircle“). Ya sea que utilice palabras clave o superellipse() Al trabajar directamente con funciones, de cualquier manera se utilizan ecuaciones matemáticas, por lo que es animable. Con eso en mente, profundicemos en la demostración anterior.
Animación corner-shape
La demostración no es demasiado complicada, así que primero pondré el CSS aquí y luego explicaré cómo funciona línea por línea:
@keyframes bend-it-like-beckham {
from {
corner-shape: superellipse(notch);
/* or */
corner-shape: superellipse(-infinity);
}
to {
corner-shape: superellipse(square);
/* or */
corner-shape: superellipse(infinity);
}
}
body::before {
/* Fill viewport */
content: "";
position: fixed;
inset: 0;
/* Enable click-through */
pointer-events: none;
/* Invert underlying layer */
mix-blend-mode: difference;
background: white;
/* Don’t forget this! */
border-bottom-left-radius: 100%;
/* Animation settings */
animation: bend-it-like-beckham;
animation-timeline: scroll();
}
/* Added to cards */
.no-filter {
isolation: isolate;
}En el fragmento de código anterior, body::before combinar content: "" Crear un pseudo elemento <body> Ningún contenido está anclado a cada borde de la ventana gráfica. Además, dado que la forma animada estará encima del contenido, pointer-events: none Asegúrese de que aún podamos interactuar con dicho contenido.
Por el color de la forma que estoy usando. mix-blend-mode: difference y background: whiteinvirtiendo la capa subyacente, que es un efecto popular sólo hasta cierto punto Mantenga el mismo nivel de contraste de color. No querrás aplicar este efecto a todo, así que aquí tienes una categoría de utilidad para excluir el efecto si es necesario:
/* Added to cards */
.no-filter {
isolation: isolate;
}Comparar:
necesitas combinar corner-shape y border-radiusque utiliza corner-shape: round Debajo del capó por defecto. Sí, así es, border-radius En realidad, no hay esquinas redondeadas. corner-shape: round Hazlo detrás de escena. bastante, border-radius Maneje las coordenadas de los ejes x e y para dibujar:
/* Syntax */
border-bottom-left-radius: <x-axis-coord> <y-axis-coord>;
/* Usage */
border-bottom-left-radius: 50% 50%;
/* Or */
border-bottom-left-radius: 50%;
En nuestro ejemplo utilizamos border-bottom-left-radius: 100% Deslice estas coordenadas al otro extremo de sus respectivos ejes. Sin embargo, anularemos el implícito corner-shape: round en nuestro @keyframe animación, entonces usamos animation: bend-it-like-beckham. No es necesario especificar la duración, ya que se trata de una animación basada en desplazamiento tal como se define animation-timeline: scroll().
existir @keyframe Animación, nuestra animación proviene de corner-shape: superellipse(notch)como un cuadrado incrustado. Esto es equivalente a corner-shape: superellipse(-infinity)por lo que en realidad no es cuadrado, pero es tan nítido que parece cuadrado. llega esta animacion corner-shape: superellipse(square) (uno al principio cuadrado), o corner-shape: superellipse(infinity).
Animación corner-shape… volver a visitar
La demostración anterior es en realidad un poco diferente a la que compartí originalmente en la introducción. Tiene un pequeño defecto y te mostraré cómo solucionarlo, pero lo más importante es que aprenderás más sobre corner-shape.
Defecto: La curvatura se ve bastante tosca al principio y al final de la animación porque nuestra animación es de notch y square¿bien? También parece que la forma ha sido absorbida por las esquinas. Finalmente, las formas pegadas a los lados de la ventana gráfica hacen que todo parezca demasiado cerrado.
La solución es sencilla:
/* Change this... */
inset: 0;
/* ...to this */
inset: -1rem;Esto estirará la forma. Superar ventana gráfica, aunque esto hace que la animación parezca comenzar más tarde y terminar antes, podemos solucionar este problema al no animar desde/hacia -infinity/infinity:
@keyframes bend-it-like-beckham {
from {
corner-shape: superellipse(-6);
}
to {
corner-shape: superellipse(6);
}
}Por supuesto, esto significa que parte de la forma siempre es visible, pero podemos jugar con superellipse() valor para garantizar que esté fuera de la ventana gráfica. Aquí hay una comparación lado a lado:
Demostración original (aquí es donde estamos ahora):
Agregar más funciones de desplazamiento
Las animaciones basadas en desplazamiento funcionan bien con otras funciones de desplazamiento, incluidas captura de desplazamiento, botón de desplazamiento, marca de desplazamientosimple fragmento de textoasí como métodos simples de JavaScript como scrollTo()/scroll(), scrollBy()y scrollIntoView().
Por ejemplo, podemos simplemente agregar el siguiente fragmento de CSS para introducir el ajuste de desplazamiento que funciona con el controlador de desplazamiento. corner-shape La animación que hemos configurado:
:root {
/* Snap vertically */
scroll-snap-type: y;
section {
/* Snap to section start */
scroll-snap-align: start;
}
}“enmascaramiento” y corner-shape
En el siguiente ejemplo, básicamente creé un borde alrededor de la ventana gráfica y luego creé una forma de muesca (corner-shape: notch) encima, del mismo color que el fondo (background: inherit). La forma primero cubre completamente el borde, pero luego lo anima (o en este caso, sus cuatro esquinas):
Si hago la forma un poco más obvia, es más fácil ver lo que está pasando aquí, que es que también estoy rotando la forma (rotate: 5deg) para hacer la forma más interesante.
Esta vez hacemos animación. border-radiusNo corner-shape. cuando animamos border-radius: 20vw / 20vh, 20vw y 20vh En referencia al eje x y al eje y de cada esquina respectivamente, esto significa que cuando nos desplazamos, se mostrará el 20% del borde.
Lo único que vale la pena mencionar aquí es que tenemos que meternos con z-index Asegúrese de que el contenido esté por encima del borde y tenga forma en el contexto de apilamiento. Aparte de eso, este ejemplo simplemente demuestra otra forma interesante de usar corner-shape:
@keyframes tech-corners {
from {
border-radius: 0;
}
to {
border-radius: 20vw / 20vh;
}
}
/* Border */
body::before {
/* Fill (- 1rem) */
content: "";
position: fixed;
inset: 1rem;
border: 1rem solid black;
}
/* Notch */
body::after {
/* Fill (+ 3rem) */
content: "";
position: fixed;
inset: -3rem;
/* Rotated shape */
background: inherit;
rotate: 5deg;
corner-shape: notch;
/* Animation settings */
animation: tech-corners;
animation-timeline: scroll();
}
main {
/* Stacking fix */
position: relative;
z-index: 1;
}Múltiples animaciones corner-shape elemento
En este ejemplo tenemos múltiples formas de diamantes anidadas gracias a corner-shape: beveltodos utilizando la misma animación de desplazamiento donde el tamaño del diamante aumenta, usando padding:
<div id="diamonds">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<main>
<!-- Content -->
</main>@keyframes diamonds-are-forever {
from {
padding: 7rem;
}
to {
padding: 14rem;
}
}
#diamonds {
/* Center them */
position: fixed;
inset: 50% auto auto 50%;
translate: -50% -50%;
/* #diamonds, the <div>s within */
&, div {
corner-shape: bevel;
border-radius: 100%;
animation: diamonds-are-forever;
animation-timeline: scroll();
border: 0.0625rem solid #00000030;
}
}
main {
/* Stacking fix */
position: relative;
z-index: 1;
}Este es un paquete
Acabamos de explorar una animación personalizada. superellipse() valor para los demás, uso corner-shape como máscara para crear nuevas formas (nuevamente, al animarlas) y animar múltiples corner-shape elemento una vez. Hay muchas formas de crear animaciones. corner-shape Además de pasar de una palabra clave a otra, si las animamos con desplazamiento, podemos crear algunos efectos realmente interesantes (aunque también se verán geniales si son estáticos).
