我一直在玩css滚动驱动的动画(目前只在Chromium浏览器中)，但有一件事我真的很难理解，那就是如何使用timeline-scope来爬行DOM并重复应用效果.
使用下面的代码片段，例如…假设我想在看到幻灯片时更改标题的 colored颜色 .我可以让它在第一张幻灯片上工作，但不能在后面的幻灯片上工作.
如果有人能指出我是如何做到这一点的，我将非常感激.在此之前，我非常感谢您.
body {
timeline-scope: --myScroller;
}
main {
border: 3px solid blue;
display: grid;
place-items: center;
height: 500vh;
}
.site-header {
width: 100%;
position: fixed;
background: blue;
top: 0;
animation-name: change-colour;
animation-timeline: --myScroller;
animation-range: exit 0% exit 100%;
}
@keyframes change-colour {
to {
background: red;
}
}
.slide {
border: 3px solid green;
height: 50vh;
display: grid;
place-items: center;
&:nth-child(1) {
view-timeline-name: --myScroller;
}
}<div class="site-header">Header</div>
<main tabindex="-1" id="main">
<div class="slide">
Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
</div>
<div class="slide">
Lorem ipsum ius kasd cibo utroque an, eum eu populo percipitur, his in equidem posidonium concludaturque. No eam deserunt salutatus, fastidii conceptam consectetuer no vim, sea paulo takimata ei. Tation sadipscing nec ei, cum graeci ancillae et. Modus
dicit altera nec ad, nostro civibus epicurei et pro. Errem numquam interesset mel at, cu unum illum vim, ius quot splendide disputando in.
</div>
</main>