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 to force or bring vertical scroll bar to front in html css

    How to create an integrated row in the table?

    CSS: How to have to divs side by side with height 100%?

    How can I animate a DOM element using transitions with dynamic values?

    How to set background color to the column using CSS?

    How to implement block style for list

    How do I animate a div with css3 to move and spin?

    How do I float a
  • to the right in CSS?
  • Why is the icon shown in some browsers while other it is not

    How to avoid inheriting opacity property in CSS?

    How to make the effects of jQuery's $(element).css() persistent?

    How to read CSS property of Psuedo class in javascript

    How to place text over different images with different positions?

    Button element styled with CSS is not showing the background-image in IE6

    How stop elements from moving

    CSS : how to center a input inside a div

    How can I place two DIVs inside a horizontal fixed header and make all the content vertically align?

    How can I create a pop up like the one Google Calendar uses ?

    How to Scale Down a Large Image Using HTML and/or CSS

    How to remove the border that show after clicking a picture

    How can I keep percentage-based elements from overlapping?

    How to append() an element and set its style with css() at the same time with jQuery

    How to adjust nav menu based nav item name character length?

    how to show ng-repeat horizontal?

    How can I resize svg using CSS?

    How does the DiggBar work?

    Javascript - how to show and hide an element per second?

    How to slide a image in background in css?

    how to create css concave/convex shapes

    Dropdown not showing elements Bootstrap 3