https://github.com/0xzakk/postcss-easings
Custom easing functions for PostCSS! :chart_with_upwards_trend:
https://github.com/0xzakk/postcss-easings
css css-animations css-transitions easing-functions easings postcss postcss-plugin
Last synced: about 1 month ago
JSON representation
Custom easing functions for PostCSS! :chart_with_upwards_trend:
- Host: GitHub
- URL: https://github.com/0xzakk/postcss-easings
- Owner: 0xZakk
- Created: 2017-02-16T04:00:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-16T04:08:44.000Z (over 9 years ago)
- Last Synced: 2023-07-22T17:22:40.019Z (almost 3 years ago)
- Topics: css, css-animations, css-transitions, easing-functions, easings, postcss, postcss-plugin
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## PostCSS Easings
Custom easing functions for PostCSS! :chart_with_upwards_trend:
## Installation
```javascript
npm install postcss-easings
```
## Usage
Wherever you've configured PostCSS:
```javascript
var easings = require('postcss-easings')
```
This:
```css
.ease-in-sine {
transition: opacity 300ms easeInSine;
}
.ease-out-sine {
transition-timing-function: easeOutSine;
}
```
Compiles to:
```css
.ease-in-sine {
transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
.ease-out-sine {
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
```
## Available Functions:
* [easeInSine](http://easings.net/#easeInSine)
* [easeOutSine](http://easings.net/#easeOutSine)
* [easeInOutSine](http://easings.net/#easeInOutSine)
* [easeInQuad](http://easings.net/#easeInQuad)
* [easeOutQuad](http://easings.net/#easeOutQuad)
* [easeInOutQuad](http://easings.net/#easeInOutQuad)
* [easeInCubic](http://easings.net/#easeInCubic)
* [easeOutCubic](http://easings.net/#easeOutCubic)
* [easeInOutCubic](http://easings.net/#easeInOutCubic)
* [easeInQuart](http://easings.net/#easeInQuart)
* [easeOutQuart](http://easings.net/#easeOutQuart)
* [easeInOutQuart](http://easings.net/#easeInOutQuart)
* [easeInQuint](http://easings.net/#easeInQuint)
* [easeOutQuint](http://easings.net/#easeOutQuint)
* [easeInOutQuint](http://easings.net/#easeInOutQuint)
* [easeInExpo](http://easings.net/#easeInExpo)
* [easeOutExpo](http://easings.net/#easeOutExpo)
* [easeInOutExpo](http://easings.net/#easeInOutExpo)
* [easeInCirc](http://easings.net/#easeInCirc)
* [easeOutCirc](http://easings.net/#easeOutCirc)
* [easeInOutCirc](http://easings.net/#easeInOutCirc)
* [easeInBack](http://easings.net/#easeInBack)
* [easeOutBack](http://easings.net/#easeOutBack)
* [easeInOutBack](http://easings.net/#easeInOutBack)
## Thanks
All of these functions are taken from [http://easings.net/](http://easings.net/)