javascript - 了解 scrollr.js 立方贝塞尔曲线

Question

我刚刚在玩 scrollr.js 插件，看到了这个 demo page .我的问题是关于动画是在 WOOOT div 上启动的，代码如下:

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);" class="skrollable skrollable-between" style="-webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: rgb(0, 0, 255);">WOOOT</div>

现在请注意如何像这样添加立方贝塞尔曲线(我认为是这样):

transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);

上面的CSS语法是什么？或者它只是一个 scrollr.js 的东西？我知道 scrollr.js 内部定义了几个立方贝塞尔曲线，但我仍然对上面的语法感到困惑。如果我检查元素，我看不到元素上定义的立方贝塞尔曲线。那么 [bounce] 到底是什么？

有documentation for its usage ，但我想知道该语法在幕后真正做了什么，它是否添加了 CSS 三次贝塞尔曲线？

Answer 1

transform[bounce] 不是 CSS 属性。这是一个 skrollr 特定的语法，用于为动画添加便利，由插件解释。 From the docs:

Skrollr allows non-linear animations. The so called easing functions can be used per-property by putting them in square brackets behind the property. There's a built-in list of easing functions (see below in the JavaScript section) and you can use your own functions by using the easings options.

缓动算法可以表示为立方贝塞尔曲线，但此插件似乎使用 JavaScript 处理动画，而不是使用 CSS 动画。