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

Question

初学前端。偶然发现这个网站，https://pepecph.com/，觉得页面上图片依次淡入出现的效果非常经验，想知道是怎么实现的。

这个问题其实包含了两个问题：

1. 请问这个种效果怎么实现的，可能需要使用到那些动画库？
2. 请问在学习前端的时候，当我发现一个网站的效果或者样式很喜欢，除了去找有其源码的git仓库链接之外，还有什么其他方法可以“逆向工程”出来它的效果？

Answer 1

淡入淡出是通过opacity和过渡属性去控制的，从0-1。
如下示例：

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

Answer 2

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

Answer 3

效果实现楼上已经说了，但楼上用的是css，其实要是不用css的话，推荐一套动画库anime.js，在自己的js里面直接传参数就行了，官网地址：https://animejs.com/

Answer 4

jQuery 效果 - 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果
jQuery 拥有下面四种 fade 方法：

 fadeIn()
 fadeOut() 
 fadeToggle() 
 fadeTo()