Penner Easing Using CSS3 Animation Keyframes. SASS/Compass Extension.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
stylesheets
README.md
compass-penner-animations.gemspec

README.md

#Penner Easing Animation SASS/Compass Extension.

###Penner-style easing using CSS3 Animation Keyframes

This extension also requires Eric Meyer's Compass Animation Extension

###Nine mixins to generate cool easing effects using CSS animations:

  • @mixin ease-in-back-keyframes($values)
  • @mixin ease-out-back-keyframes($values)
  • @mixin ease-in-out-back-keyframes($values)
  • @mixin ease-in-bounce-keyframes($values)
  • @mixin ease-out-bounce-keyframes($values)
  • @mixin ease-in-out-bounce-keyframes($values)
  • @mixin ease-in-elastic-keyframes($values)
  • @mixin ease-out-elastic-keyframes($values)
  • @mixin ease-in-out-elastic-keyframes($values)

##Usage See Demo

@import "animation"; // https://github.com/ericam/compass-animation
@import "compass-penner-easing";

@include keyframes(some-animation) {
   // pass in a list of start and end values to ease between
   // eg.
   // 0=>50
   // 300 =>100
   @include ease-in-out-elastic-keyframes( (0 50, 300 100) ){
   	// reference the global $_EASE variable on whatever properies you want animated
   	// (nth item value corresponds to the start and end values you pass in)
   	border-width:#{nth($_EASE,1)}px;
   	width:#{nth($_EASE,2)}px;
   }
}

#myDiv {
   // reference animation use non-shorthand properties!
   @include animation-name(some-animation);
   @include animation-duration(1s);
}

More Demos