Animation-timeline scroll() – valeur de progression
HTML
index.html <figure class="scroll-watcher">
<figcaption class="caption"></figcaption>
</figure>
CSS
style.css @layer demo {
@property --progress {
syntax: "<integer>";
initial-value: 0;
inherits: true;
}
.scroll-watcher {
animation-name: progress-animation;
counter-reset: counter-progress var(--progress);
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: scroll();
}
.caption {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
font-size: 1rem;
color: white;
text-align: center;
}
.caption::before,
.caption::after {
content: counter(counter-progress);
font-size: 5rem;
font-weight: bold;
}
.caption::after {
content: "%";
}
@keyframes progress-animation {
to {
--progress: 100;
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
height: 2000px;
}
.box {
width: 200px;
height: 200px;
border-radius: 15px;
}
}