Animation-timeline – scroll-timeline nommée
HTML
index.html <div class="scroller">
<div class="progress"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.
<div class="subject"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores quasi, ea mollitia accusantium atque quibusdam laboriosam assumenda blanditiis fugit nam, deserunt repudiandae harum ipsa vitae optio eligendi, consectetur odit.
</div>
CSS
style.css @layer demo {
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: block;
}
.scroller .subject {
animation: animate-it linear;
animation-timeline: --my-scroller;
}
.scroller .progress {
animation: progress linear;
animation-timeline: --my-scroller;
}
@keyframes animate-it {
0% {
scale: 0;
}
100% {
scale: 1;
}
}
@keyframes progress {
0% {
transform: translateX(0) scaleX(0);
}
100% {
transform: translateX(0) scaleX(1);
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
}
.scroller {
width: 300px;
height: 200px;
overflow-y: auto;
}
.subject {
width: 100px;
height: 100px;
border-radius: 15px;
background: red;
}
.progress {
width: 100%;
height: 10px;
position: absolute;
top: 0;
left: 0;
transform-origin: 0 0;
background: cyan;
}
}