How to use Compass Animation for Compass SCSS framework?


Tags: css,sass,compass-sass

Problem :

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

<a href="#" class="widget">Click Me</a>

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% {
    -moz-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } }

@-webkit-keyframes flipOutY {
  /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  0% {
    -webkit-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% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } }

@-o-keyframes flipOutY {
  /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  0% {
    -o-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% {
    -o-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } }

@-ms-keyframes flipOutY {
  /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  0% {
    -ms-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% {
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } }

@keyframes flipOutY {
  /* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
  0% {
    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% {
    transform: perspective(400px) rotateY(90deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; } }

.widget:hover {
-webkit-animation: flipOutY;
-moz-animation: flipOutY;
-ms-animation: flipOutY;
-o-animation: flipOutY;
animation: flipOutY;
background: pink;
}

However, it doesn't seem to be working. Could someone explain what I am doing wrong. Thanks!



Solution :

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.)


    CSS Howto..

    How this blur works

    repeated divs loaded by angular could have different contents, how can I make them have automatically adjusted heights?

    How to use CSS first-child but excluding text content

    How to increase the duration of :active in css?

    How to remove extra space in navigation bar? [duplicate]

    How do I span columns with a div based table?

    How do I post a jsfiddle example of some trouble I'm seeing in Rails?

    How to isolate CSS rules inside a div?

    How to center a child element in CSS, even if it is larger than the parent?

    Show background image if container content is small (responsive)

    How to… Three wordpress sites with one css … ? child theme

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to have dots as horizontal separator with inline text like in this screenshot?

    ABBR tooltip CSS styling: How to suppress original tooltip, add rounded corners? [duplicate]

    How to pass the output of CSS Selector to beautiful soup?

    How to implement conditional CSS in this situation?

    How to add a border to only percentage of width of element, CSS Trick

    Hide/show block with CSS

    How to get maximum compatibility with most of the devices for a Mobile Website?

    How to get this div into the right position

    How to change the css class=“current” when using page jumping (single page website)?

    How to remove the extra space between two span elements?

    How can I set different gradients as background, each time user refreshes?

    How to prevent an empty img element from shrinkage?

    how would I have the image in this div with rollover not get the overlay?

    How to fixed
    in the specific location in css

    css3 pure: how to hover an element outside?

    jQuery .css, how to translate it into Javascript

    How can I enable/disable(in real time) javascript plugins on a webpage?

    How to change the CSS of entire page/website on click?