为什么此动画不会出现在DevTools Animations选项卡中？

Question

我正试图弄清楚Invision's blog动画是如何运作的。特别是滚动时下图所示的标题图像上的缩放和阴影。

我原以为这会是一个CSS动画，但它并没有出现在Chrome DevTools＆＃39; Animations＆＃39;标签

这个动画是如何工作的，以及为什么它不会出现在动画片中？＆＃39;标签吗

Answer 1

我快速浏览了一下，这就是我想出的：

让我们从元素.post-hero开始：它充当了一个包装器，并且position: fixed使图像在我们滚动时或多或少地保持原位。

在此内部有.hero-bg元素，其中包含背景图像本身。请注意，此元素的内联样式将其background设置为none，但它具有指向背景图像本身的data-bg属性。我的猜测是，在页面加载时，会使用一些JavaScript来获取此属性并添加实际图像。

实际图片在<img>内的.backstretch元素内设置为.hero-bg元素。现在，.backstretch元素是动画本身发生的位置：此元素的不透明度随着我们滚动（更改着色量）而变化，并且还有一个变换，其中3D转换和缩放也会在元素上发生变化。我想这是使用JavaScript和页面上的滚动事件监听器完成的。

关注.hero-bg，.hero-overlay背景颜色为#252b33，不透明度为0.35，可提供图像的阴影效果，以及实际图像的不透明度在页面滚动时更改。

编辑：如果右键单击.backstretch元素并选择“中断属性修改”，然后滚动，您将发现元素的属性在名为CSSPlugin.min.js的文件中被修改。谷歌搜索这似乎指向CSSPlugin是GSAP动画库的插件...我自己没有经验，但我知道它很受欢迎，其他人可能会确认这是否是以前做的动画。我的猜测是动画是使用GSAP CSSPlugin完成的。