Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhardy/compass-ceaser-easing
Penner equations for css3 transitions
https://github.com/jhardy/compass-ceaser-easing
Last synced: 13 days ago
JSON representation
Penner equations for css3 transitions
- Host: GitHub
- URL: https://github.com/jhardy/compass-ceaser-easing
- Owner: jhardy
- License: mit
- Created: 2011-03-22T19:49:58.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2015-09-28T02:42:35.000Z (about 9 years ago)
- Last Synced: 2024-10-11T06:11:51.199Z (about 1 month ago)
- Language: CSS
- Homepage:
- Size: 165 KB
- Stars: 409
- Watchers: 24
- Forks: 32
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Compass Ceaser CSS Easing Transitions
======================================A compass extension based on [ceasar css easing animation tool](http://matthewlein.com/ceaser/) by [@matthewlein](http://twitter.com/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](http://matthewlein.com/ceaser/)$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
$easeInOutBackThe 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