这种图片依次淡入出现的效果是如何实现的？万分感谢

Question

初学前端。偶然发现这个网站，https://pepecph.com/，觉得页面上图片依次淡入出现的效果非常经验，想知道是怎么实现的。这个问题其实包含了两个问题：请问这个种效果怎么实现的，可能需要使用到那些动画库？请问在学习前端的时候，当我发现一个网站的效果或者样式很喜欢，除了去找有其源码的git仓库链接之外，还有什么其他方法可以“逆向工程”出来它的效果？

Answer 1

淡入淡出是通过opacity和过渡属性去控制的，从0-1。如下示例：
.image{
transition:all2s;//all表示该元素不管什么属性变化都会触发过渡效果，如果只想要单一效果把all换成opacity就行，表示透明度变化才过渡。2s表示过渡周期为2秒。
}
.fadeout{
opacity:0;
}
//当有了上面两个CSS后，只需要动态给timg标签再加上fadeout类名，变成：，就会触发淡出效果。“逆向工程”你需要会使用chrome的F12，查看元素，查看CSS，查看JS。
                            

Answer 2

推荐一个amazing的动画库GSAP，非常快，还支持与react和vue结合使用，目前官网数据是已被500+万个网站和品牌使用。