How can I stop a CSS animation on scroll?
<p>I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls. </p>

<p>Normally I could do something like this: </p>

<pre><code>jQuery(window).scroll(function() {
    jQuery('.arrow').css("display", "none");
});
</code></pre>

<p>However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working. </p>

<p>Is there a way to hide the animation that is not based on scrolling detection?</p>

<p><a href="http://codepen.io/sol_b/pen/ORGKbP" rel="nofollow">http://codepen.io/sol_b/pen/ORGKbP</a></p>

<p>Thanks.</p>

<p>EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.</p>