Need help with compass-ceaser-easing?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jhardy
415 Stars 32 Forks MIT License 35 Commits 2 Opened issues

Description

Penner equations for css3 transitions

Services available

!
?

Need anything else?

Contributors list

# 272,210
CSS
TypeScr...
17 commits
# 217,816
CSS
HTML
recaptc...
React
1 commit
# 148,738
Node.js
HTML
jQuery
Bootstr...
1 commit
# 9,027
CSS
React N...
npm
reasonm...
1 commit

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.