How to use Compass Animation for Compass SCSS framework?

Question

I am trying to use compass animation, but it doesn't seem to work. Here are how my files are set up: Config.rb ``` # Require any additional compass plugins here. require 'animation' ``` Screen.scss ``` @import "compass"; @import "compass/reset"; @import "animation"; @import "animation/animate"; @import "animation/animate/classes"; .widget:hover { @include animation(flipOutY); background:pink; } body { background:red; } ``` Index.html ``` ``` This is the output of my css: ``` @-moz-keyframes flipOutY { /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */ 0% { -moz-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */ 100% { -mo…

Accepted Answer

I think a duration is required in order for this to work. That's a mistake in the README.

(You should also note that Compass Animation isn't really being maintained any longer - as it is moving into the Compass Core for 0.13 release. I recommend using the master branch of Compass, and Compass-Animate instead. Those are better maintained.)

How to use Compass Animation for Compass SCSS framework?

Solution

Problem