Skip to content
Penner equations for css3 transitions
Branch: master
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
templates/project small fixes and added legacy support to README Jan 8, 2013
.gitignore
Gemfile bundler test Jan 8, 2013
LICENSE bundler test Jan 8, 2013
README.md
Rakefile
ceaser-easing.gemspec add rake dependecy and update README Jun 1, 2013
sache.json
sassmanifest.json update with manifest Oct 13, 2013

README.md

Compass Ceaser CSS Easing 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.

Installation

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"

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

The ceaser easing function

#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

}

Ease Types

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 mixin

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;
}

Legacy Support

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
You can’t perform that action at this time.