jquery - Css3アニメーションチートシートがレールで機能しない

Question

私は Rails を使用しており、CSS3 Animations Cheat Sheetを実装しようとしています。

に追加animations.cssしましたvender/assets/stylesheets。に追加*= require animationsしましたapplication.css。に追加@import "animations";しましたhome.css.scss。

関連する要素は<%= image_tag("pitt.png", size: "336x440", class: "slideLeft", id: "picture") %>. からのcssスタイリングは次のhome.css.scssとおりです。

#picture {
    margin-top: 10px;
    margin-left: 20px;
    border: 3px solid rgba(255, 165, 0, 0.4);
    border-radius: 10px;
    padding-bottom: 10px;
    visibility: hidden;
}  

これにより、アニメーションは発生しません。画像も隠していません。ただし、slideLeft の代わりに pullDown クラスにすると、要素は非表示になりますが、アニメーションでは表示されません (まったく表示されません)。

これを修正するにはどうすればよいですか?

編集：

animations.css= http://www.justinaguilar.com/animations/css/animations.css

application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require jquery.ui.all
 *= require jquery-ui/smoothness
 *= require bootstrap
 *= require animations
 *= require_self
 *= require_tree .
 */