https://github.com/postcss/postcss-easings
PostCSS plugin to replace easing names to cubic-bezier()
https://github.com/postcss/postcss-easings
Last synced: 11 months ago
JSON representation
PostCSS plugin to replace easing names to cubic-bezier()
- Host: GitHub
- URL: https://github.com/postcss/postcss-easings
- Owner: postcss
- License: mit
- Created: 2015-02-07T05:22:15.000Z (about 11 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T14:18:16.000Z (over 1 year ago)
- Last Synced: 2024-10-29T13:50:05.555Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 467 KB
- Stars: 151
- Watchers: 9
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Easings
[PostCSS] plugin to replace easing name from [easings.net] to `cubic-bezier()`.
[easings.net]: http://easings.net/
[PostCSS]: https://github.com/postcss/postcss
```css
.snake {
transition: all 600ms ease-in-sine;
}
.camel {
transition: all 600ms easeInSine;
}
```
```css
.snake {
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
.camel {
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-easings
```
**Step 2:** Check your project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-easings'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage
Also, you can get all built-in easings:
```js
require('postcss-easings').easings;
```
## Options
### `easings`
Allow to set custom easings:
```js
require('postcss-easings')({
easings: { easeJump: 'cubic-bezier(.86,0,.69,1.57)' }
})
```
The plugin will convert custom easing name between camelCase and snake-case.
So the example below adds `easeJump` and `ease-jump` easings.
Custom easing names must start from `ease` and contain only letters and `-`.
You can create custom easing on [cubic-bezier.com].
[cubic-bezier.com]: http://cubic-bezier.com/