Skroll Stylesheet not working

I have the following code:

Gem:

gem 'skrollr-rails'

Javascript:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require skrollr
//= require skrollr.menu
//= require skrollr.stylesheets
//= require_tree .
$(document).on("ready page:load", function () {
    var s = skrollr.init({
        smoothScrolling: false,
        mobileDeceleration: 0.004
    });

    skrollr.menu.init(s, {
        animate: true,
        scale: 2
    });

    s.refresh();
});

Css:

#foo { -skrollr-animation-name: animation1; }

@-skrollr-keyframes animation1 {
    skrollr-200 { left: 0%; }
    top { color: rgb(0, 0, 0); }
    bottom { color: rgb(255, 0, 0); }
}

Include css:

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true, 'data-skrollr-stylesheet' => ''  %>

Html:

<div id="foo">fooooo</div>

The plugin should fill in the properties in the input as well as the official documentation on this LINK but is doing nothing. What could it be? See the Photo