CSS
Explora scroll snap, animaciones vinculadas al desplazamiento y View Transitions API para crear continuidad visual sin controlar cada frame con JavaScript.
.carousel {
display: flex;
overflow-inline: auto;
scroll-snap-type: inline mandatory;
}
.carousel > * {
flex: 0 0 80%;
scroll-snap-align: start;
}El scroll container define eje y fuerza; los children definen puntos de ajuste.
mandatory → intenta terminar siempre en un snap point
proximity → ajusta cuando el punto está suficientemente cercaMandatory puede impedir acceder cómodamente a contenido más grande que el viewport. Proximity suele ser menos agresivo.
.carousel {
scroll-padding-inline: 1rem;
}
.card {
scroll-margin-inline: 1rem;
}Compensan gutters, headers sticky y espacio deseado alrededor del target.
.card {
scroll-snap-stop: always;
}Puede obligar a detenerse en cada item y volver pesada la navegación. Úsalo solo cuando saltarse un punto sería problemático.
.progress {
animation: grow linear;
animation-timeline: scroll();
}
@keyframes grow {
from { scale: 0 1; }
to { scale: 1 1; }
}La animación progresa según el scroll container en vez del tiempo.
.section {
view-timeline-name: --section;
view-timeline-axis: block;
}
.section__content {
animation: reveal linear both;
animation-timeline: --section;
animation-range: entry 10% cover 40%;
}Una view timeline responde a la posición de un elemento dentro del scrollport.
Define qué parte del timeline alimenta la animación:
animation-range: entry 0% cover 50%;Prueba contenido de distintas alturas; rangos visualmente correctos en una card pueden fallar en otra.
.item {
opacity: 1;
translate: none;
}
@supports (animation-timeline: scroll()) {
.item {
animation: reveal linear both;
animation-timeline: view();
}
}La base no debe comenzar invisible y depender de una feature no soportada para aparecer.
Para cambios de estado del documento:
document.startViewTransition(() => {
updateDOM();
});CSS controla los pseudo-elementos generados:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 250ms;
}.project-image {
view-transition-name: project-image;
}Los nombres activos deben ser únicos dentro del snapshot. Duplicarlos puede cancelar la transición.
Las view transitions entre documentos del mismo origen utilizan opt-in declarativo en navegadores compatibles:
@view-transition {
navigation: auto;
}El soporte y las restricciones de navegación deben verificarse para el público objetivo.
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*) {
animation-duration: 0.01ms;
}
}Para scroll-driven animations, conserva contenido visible y elimina desplazamientos grandes.
¿Por qué un reveal con opacity: 0 fuera de @supports es peligroso?
Porque un navegador sin soporte de scroll-driven animations mantendría el contenido invisible permanentemente.
Filters, blending, clipping y masking modifica cómo se compone la imagen final.