timeline-scope让滚动容器外元素动画实例页面

效果：

// zxx：滚动上面的容器

代码：

CSS代码：

body {
    timeline-scope: --scaleFade;
}
.scroller {
    height: 200px;
    border: 1px solid;
    overflow: auto;
    scroll-timeline: --scaleFade;
}
.target {
    animation: 1ms scaleRoate both, 1ms fadeIn both;
    animation-timeline: --scaleFade;
}
@keyframes scaleRoate {
    from { transform: scale(0) rotate(0deg); }    
    to { transform: scale(1) rotate(360deg); }
}
@keyframes fadeIn {
    from { opacity: 0; }    
    to { opacity: 1; }
}

HTML代码：

<div class="scroller">
    <div style="height:400px;"></div>
</div>

<img class="target" src="1.jpg" />