デザイナーなのでJavaScriptはよくわかりません。
相対モードの 2 つのアニメーションがあります。最初に表示すると、開始キーフレーム (スクロールのその時点) にあるはずなのに、最後のキーフレームに表示されます。何らかの方法でブラウザ ウィンドウのサイズを変更すると、正しい動作が想定され、本来あるべき開始キーフレームに戻ります。ただし、ページを再度更新すると、常に最後のキーフレームに読み込まれるため、ビューポートのサイズまたはスクロール位置が間違っていると思われます。
サイトはこちら: http://vostrocity.dreamhosters.com/#skills
たとえば、次の例では、ウィンドウのサイズを変更しない限り、最後のキーフレームのみが表示されます。
<div id="venn-prototyping" class="venn"
data-100-top-top="transform[swing]:translate(0px,0px);"
data--100-top-bottom="transform[swing]:translate(-290px,600px);">
<h2>Prototyping</h2>
</div>
ブラウザー ウィンドウのサイズを変更しなくても正常に動作する絶対モードのアニメーションが 1 つあります。