我不确定我想做的事情是否可以使用 skrollr，这似乎是不可能的，但也许我误解了。我希望能够描述相对于其他关键帧事件的滚动点中的关键帧，例如“在另一个元素的动画事件之后 500px 开始这个动画事件”，并想知道最佳实践是什么。我正在处理包含多个动画内容部分的大页面。每个部分都滚动到顶部，然后随着在该部分中的许多关键帧上出现多个动画而暂时固定，然后一旦该部分的动画完成，它就会向上滚动到屏幕之外，下一个部分进入视图并执行它自己的动画，并且依此类推（与主要的skrollr 演示不同）但更复杂的动画事件更多）。我的主要问题是我希望能够在未来轻松地独立编辑每个部分的动画时间，例如根据需要在这里和那里调整一些小细节，期待与我的艺术家和客户的一些来回一起工作。但是，当所有时间都依赖绝对值时scrollTop，这会变得有问题，因为一点点时间变化意味着我必须在页面的其余部分调整所有后续时间。为了解决这个问题，我使用常量来表示每个动画部分的开始，这样至少我可以让每个动画部分相对于它的开始进行计时，如下所示：
<style type="text/css">
#fixedanimatedcontent1, #fixedanimatedcontent2 {position: fixed;}
</style>
<section id="fixedanimatedcontent1" data-_fixedanimstart1--630="top:100%;" data-_fixedanimstart1="top:0%;" data-_fixedanimstart1-1500="top:0%;" data-_fixedanimstart2="top:-100%;">
<div data-_fixedanimstart1="width: 0%;" data-_fixedanimstart1-470="width: 100%"></div>
<img src="x.png" data-_fixedanimstart1-270="opacity: 0;" data-_fixedanimstart1-670="opacity: 1;" data-_fixedanimstart1-1170="opacity: 0;" />
</section>
<section id="fixedanimatedcontent2" data-_fixedanimstart2--630="top:100%;" data-_fixedanimstart2="top:0%;" data-_fixedanimstart2-2000="top:0%;" data-_fixedanimstart3="top:-100%;">
<img src="y.png" data-_fixedanimstart2-500="opacity: 0;" data-_fixedanimstart2-1000="opacity: 1;" data-_fixedanimstart2-1500="opacity: 0;" />
</section>
但即便如此，对于复杂的序列，进行小的时间更改会有点混乱，至少需要更改该部分中的所有关键帧偏移量，并且可能还需要更改常量值。看看我上面的例子，有两个问题：
1) 有没有办法描述一个相对关键帧，比如说，在 section#fixedanimatedcontent2的 top=0% 之后 500px 开始？我知道我可以做到data-top，但是在我的设置#fixedanimatedcontent2中，一旦达到顶部，它就会在顶部固定一段时间。那么如何描述一个我想要在#fixedanimatedcontent2点击后开始滚动 500 像素的关键帧data-top呢？这在“相对关键帧”的语法中是不可能的，因为偏移量仅相对于视口中的元素位置？如果这以某种方式可行，我就不必如此依赖常量......
2) 当 section 的不透明度达到 1 时开始的关键帧怎么#fixedanimatedcontent2样<img>？这样，我以后可以在需要更改<img>不透明度插值的长度时，而不必更改所有后续关键帧时间。很确定这是不可能的，但不得不问......
那么：我是否误解了最有效地进行这种相对测序的最佳方法是什么？还是使用上面示例中的常量是最佳实践？
（这是一个非常冗长的帖子，对不起！）