Javascript 如何在一个元素出现在屏幕上时立即更改其css属性

有一个问题，我看到一些网站，当你向下滚动页面时，一些元素出现了，这些元素开始修改它的属性，比如大小和位置。当您再次向上滚动时，这些元素会返回到其原始大小和位置

当元素显示在屏幕上时，有没有办法修改css属性？

下面是一个例子。

.animation1{
宽度：100px；
高度：100px；
背景色：红色；
动画名称：示例；
动画持续时间：4s；
}
.动画2{
宽度：100px；
高度：100px；
背景色：红色；
}
.空间{
高度：150vh；
}
@关键帧示例{
0%{背景色：红色；}
25%{背景色：黄色；}
50%{背景色：蓝色；}
100%{背景色：绿色；}
}

AOS.init（）；

它们通常会更改元素的类。

element.classList.add（'someClass'）