css animations example

screen.scss

@import "../../compass-mixins/lib/animation/core";
@import "../../compass-mixins/lib/animation/animate/fading";
@import "../../compass-mixins/lib/animation/animate/rotating";
@import "../../compass-mixins/lib/animation/animate/bouncing";
@import "../../compass-mixins/lib/animation/animate/specials";
@import "../../compass-mixins/lib/animation/animate/lightspeed";
@import "../../compass-mixins/lib/animation/animate/attention-seekers";
@import "base";
@import "colors";
@import "definition-lists";
@import "transitions";
@import "typography";

/////////////////////////////////////////////////////////
// Example of how to use CSS-only animations in Sass.
// See all of them here: http://daneden.github.io/animate.css/
// This is a collection of animations together.
// I use the body tag to indicate which animation "suite" will be applied to the page.
// In this case a goofy powerpoint-style bounce-in effect.
// The more interesting thing perhaps is that we are using these with node-sass and bower.
// These are from the `compass-mixins` https://github.com/Igosuki/compass-mixins

body.animated-bounce {
  // Fade in all content
  @include animation("fadeIn" 1s);
  #logo {
    // Load the the logo a little slower
    @include animation("bounceInDown" 0.6s);
  }
  .special-definition {
    dt {
      // Load this a little faster
      @include animation("bounceInDown" 0.3s);
    }
    dd {
      // And so on
      @include animation("bounceInDown" 0.8s);
    }
  }
  .slogan {
    // This is the fourth animation
    @include animation("bounceInDown" 1s);
  }
}

.main-animation {
  // This is a totally different animation that goes up instead of down
   @include animation("fadeInUpBig" 3s);
}