Scroll Snap
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroller section {
scroll-snap-align: start;
}
overscroll-behavior
.foo {
height: 200px;
overflow: auto;
overscroll-behavior-y: contain;
}
scroll-behavior
.foo {
scroll-behavior: auto;
scroll-behavior: smooth;
}
scrollbar-gutter
.container {
scrollbar-gutter: stable;
}
ViewTransition API
::view-transition-old(main-image),
::view-transition-new(main-image) {
transform-origin: right top;
}
::view-transition-new(main-image) {
animation: 400ms ease-out both grow;
}
figure {
view-transition-name: main-image;
}
scroll-timeline
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline: --squareTimeline y;
position: relative;
}
view-timeline
.animation {
view-timeline: --subjectReveal block;
animation-name: appear;
animation-fill-mode: both;
animation-duration: 1ms;
}
Discrete Properties Animations
Animate to and from properties such as display: none
/* IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* EXIT STATE */
dialog {
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
/* 0. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}