Penner equations for css3 transitions
A compass extension based on ceasar css easing animation tool by @matthewlein This extension provides transitions based on the classic Penner equations from Flash and jQuery.
Install gem from the command line:
gem install ceaser-easing
Adding Ceaser Easing to an existing project:
# Edit the project configuration file and add: require 'ceaser-easing'#import ceaser-easing into your sass/scss file @import "ceaser-easing"
Create a new project using Ceaser Easing
compass create project_name -r ceaser-easing -u ceaser-easing#import ceaser-easing into your sass/scss file @import "ceaser-easing"
The ceaser easing extension provides a sass function called ceaser. You use the function as a value for a transition or animation timing-function property. You pass what type of easing you would like to the function and it will apply the correct cubic-bezier transition timing function for you.
#transition { transition-property: all; transition-duration: 1.2s; transition-timing-function: ceaser($ease-in); }#transition-shorthand { transition: all 1.2s ceaser($ease-in); }
#animation { animation-name: animateMe; animation-iteration-count: infinite; animation-duration: 10s; animation-timing-function: ceaser($easeInSine); }
#animation-shorthand { animation: animateMe 10s ceaser($easeInSine) infinite
}
Here is a list of all the available easing types to choose from, you can see an example of each on the original demo page
$linear $ease (default) $ease-in $ease-out $ease-in-out$easeInQuad $easeInCubic $easeInQuart $easeInQuint $easeInSine $easeInExpo $easeInCirc $easeInBack
$easeOutQuad $easeOutCubic $easeOutQuart $easeOutQuint $easeOutSine $easeOutExpo $easeOutCirc $easeOutBack
$easeInOutQuad $easeInOutCubic $easeInOutQuart $easeInOutQuint $easeInOutSine $easeInOutExpo $easeInOutCirc $easeInOutBack
The ceaser easing extension provides a mixin called ceaser. You pass what type of easing you would like to the mixin and it will apply the correct cubic-bezier transition timing function for you. You can then pass the transition property (defaults to all), the transition duration (defaults to 500ms), and the transition delay (defaults to 0).
# The ceaser easing mixin with its argument descriptions @mixin ceaser-transition(transition property, duration, ease type, delay)Example mixin call that will create a 3 second transition with the ease type of ease-in
@include ceaser-transition(all, 3s, $ease-in)
Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second
@include ceaser-transition(width, 500ms, $easeInOutExpo, 1s)
As an example, here is how create the above transition for an html element with id of box.
#box { width: 500px; @include ceaser-transition(width, 500ms, $easeInOutExpo, 1s); }#box:hover { width: 700px; }
In this new version of ceaser-easing easing types have move to sass variables instead of using strings. Below is a comparison of the old and new syntax:
.old-syntax { transition-property: all; transition-duration: 1.2s; transition-timing-function: ceaser("ease-in"); }.new-syntax { transition-property: all; transition-duration: 1.2s; transition-timing-function: ceaser($ease-in); }
For legacy purpose for this update you can use the old syntax but have to be sure enable legacy support by setting the ceaser-legacy variable to true like this:
#Legacy Variable $ceaser-legacy: true