CSS滚动动画实现图片淡出缩放效果实例页面

效果：

我是图片1，是不是很熟悉，专属配图：

最近上架新书作品封面图：

//张鑫旭：滚动上面的容器

代码：

CSS代码：

.scroller {
    height: 200px;
    max-width: 380px;
    border: 1px solid;
    overflow: auto;
}
.scroller img {
    max-width: 100%;
    animation: 1ms scaleUp both, 1ms fadeIn both;
    animation-timeline: --scaleFade;
    view-timeline: --scaleFade;
}
@keyframes scaleUp {
    from { transform: scale(0); }    
    to { transform: scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }    
    to { opacity: 1; }
}

HTML代码：

<div class="scroller">
    <div style="height:100px;"></div>
    <p>我是图片1，是不是很熟悉，专属配图：</p>
    <p><img src="1.jpg" /></p>
    <p>最近上架新书作品封面图：</p>
    <p><img src="2.jpg" /></p>
    <div style="height:100px;"></div>
</div>