# easings-css
> Easing functions for CSS, provided as CSS Custom Properties, JavaScript modules, JSON object and Less and Sass variables.
Latest version **2.1.1** (published 2021-10-01) · MIT license · 0 weekly downloads
## Install
```sh
npm install easings-css
pnpm add easings-css
yarn add easings-css
bun add easings-css
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-10-01 |
| First published | 2017-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Jacob Buck |
| Maintainers | jacobbuck |
| Keywords | animation, animation-timing-function, css, easings, less, sass, scss, timing-function, transition, transition-timing-function |
## Links
- npm: https://www.npmjs.com/package/easings-css
- Repository: https://github.com/jacobbuck/easings-css
- Homepage: https://github.com/jacobbuck/easings-css#readme
- Issues: https://github.com/jacobbuck/easings-css/issues
- npm.io page: https://npm.io/package/easings-css
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 2.1.1 (latest) — 2021-10-01
- 2.1.0 — 2021-10-01
- 2.0.3 — 2020-10-05
- 2.0.2 — 2020-10-05
- 2.0.1 — 2020-09-14
- 2.0.0 — 2020-09-13
- 1.0.0 — 2017-06-29
## README
# easings-css
Provides [easing functions](http://easings.net/) for CSS.
Available as CSS Custom Properties, JavaScript modules, JSON object and Less and Sass variables.
## Usage
### CSS
```css
@import 'easings-css';
```
> :warning: If you're not using [postcss-import](https://github.com/postcss/postcss-import) or similar to automatically resolve `node_modules`, you'll need to manually resolve to the path: `node_modules/easings-css/index.css`.
```css
.example {
transition-timing-function: var(--ease-out-quad);
}
```
### LESS
```less
@import 'easings-css';
```
```less
.example {
transition-timing-function: @ease-out-quad;
}
```
### SASS
For Sass v3.6.0 and newer:
```scss
@import 'node_modules/easings-css';
```
For all other versions:
```scss
@import 'node_modules/easings-css/easings';
```
```scss
.example {
transition-timing-function: $ease-out-quad;
}
```
### JavaScript
```js
const easings = require('easings-css');
```
```js
const Example = styled.div`
transition-timing-function: ${easings.easeOutQuad};
`;
```
### JavaScript Module
```js
import * as easings from 'easings-css';
```
You can also import individual easings for better tree-shaking:
```js
import { easeOutQuad } from 'easings-css';
```
```js
const Example = styled.div`
transition-timing-function: ${easeOutQuad};
`;
```
## Easings
### easeInSine
[`cubic-bezier(0.47, 0, 0.745, 0.715)`](https://cubic-bezier.com/#.47,0,.745,.715)
| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| `var(--easeInSine)` or
`var(--ease-in-sine)` | `@easeInSine` or
`@ease-in-sine` | `$easeInSine` or
`$ease-in-sine` | `easeInSine` |
### easeOutSine
[`cubic-bezier(0.39, 0.575, 0.565, 1)`](https://cubic-bezier.com/#.39,.575,.565,1)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeOutSine)` or
`var(--ease-out-sine)` | `@easeOutSine` or
`@ease-out-sine` | `$easeOutSine` or
`$ease-out-sine` | `easeOutSine` |
### easeInOutSine
[`cubic-bezier(0.445, 0.05, 0.55, 0.95)`](https://cubic-bezier.com/#.445,.05,.55,.95)
| CSS | LESS | SASS | JS |
| -------------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | --------------- |
| `var(--easeInOutSine)` or
`var(--ease-in-out-sine)` | `@easeInOutSine` or
`@ease-in-out-sine` | `$easeInOutSine` or
`$ease-in-out-sine` | `easeInOutSine` |
### easeInQuad
[`cubic-bezier(0.55, 0.085, 0.68, 0.53)`](https://cubic-bezier.com/#.55,.085,.68,.53)
| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| `var(--easeInQuad)` or
`var(--ease-in-quad)` | `@easeInQuad` or
`@ease-in-quad` | `$easeInQuad` or
`$ease-in-quad` | `easeInQuad` |
### easeOutQuad
[`cubic-bezier(0.25, 0.46, 0.45, 0.94)`](https://cubic-bezier.com/#.25,.46,.45,.94)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeOutQuad)` or
`var(--ease-out-quad)` | `@easeOutQuad` or
`@ease-out-quad` | `$easeOutQuad` or
`$ease-out-quad` | `easeOutQuad` |
### easeInOutQuad
[`cubic-bezier(0.455, 0.03, 0.515, 0.955)`](https://cubic-bezier.com/#.455,.03,.515,.955)
| CSS | LESS | SASS | JS |
| -------------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | --------------- |
| `var(--easeInOutQuad)` or
`var(--ease-in-out-quad)` | `@easeInOutQuad` or
`@ease-in-out-quad` | `$easeInOutQuad` or
`$ease-in-out-quad` | `easeInOutQuad` |
### easeInCubic
[`cubic-bezier(0.55, 0.055, 0.675, 0.19)`](https://cubic-bezier.com/#.55,.055,.675,.19)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeInCubic)` or
`var(--ease-in-cubic)` | `@easeInCubic` or
`@ease-in-cubic` | `$easeInCubic` or
`$ease-in-cubic` | `easeInCubic` |
### easeOutCubic
[`cubic-bezier(0.215, 0.61, 0.355, 1)`](https://cubic-bezier.com/#.215,.61,.355,1)
| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| `var(--easeOutCubic)` or
`var(--ease-out-cubic)` | `@easeOutCubic` or
`@ease-out-cubic` | `$easeOutCubic` or
`$ease-out-cubic` | `easeOutCubic` |
### easeInOutCubic
[`cubic-bezier(0.645, 0.045, 0.355, 1)`](https://cubic-bezier.com/#.645,.045,.355,1)
| CSS | LESS | SASS | JS |
| ---------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------- | ---------------- |
| `var(--easeInOutCubic)` or
`var(--ease-in-out-cubic)` | `@easeInOutCubic` or
`@ease-in-out-cubic` | `$easeInOutCubic` or
`$ease-in-out-cubic` | `easeInOutCubic` |
### easeInQuart
[`cubic-bezier(0.895, 0.03, 0.685, 0.22)`](https://cubic-bezier.com/#.895,.03,.685,.22)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeInQuart)` or
`var(--ease-in-quart)` | `@easeInQuart` or
`@ease-in-quart` | `$easeInQuart` or
`$ease-in-quart` | `easeInQuart` |
### easeOutQuart
[`cubic-bezier(0.165, 0.84, 0.44, 1)`](https://cubic-bezier.com/#.165,.84,.44,1)
| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| `var(--easeOutQuart)` or
`var(--ease-out-quart)` | `@easeOutQuart` or
`@ease-out-quart` | `$easeOutQuart` or
`$ease-out-quart` | `easeOutQuart` |
### easeInOutQuart
[`cubic-bezier(0.77, 0, 0.175, 1)`](https://cubic-bezier.com/#.77,0,.175,1)
| CSS | LESS | SASS | JS |
| ---------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------- | ---------------- |
| `var(--easeInOutQuart)` or
`var(--ease-in-out-quart)` | `@easeInOutQuart` or
`@ease-in-out-quart` | `$easeInOutQuart` or
`$ease-in-out-quart` | `easeInOutQuart` |
### easeInQuint
[`cubic-bezier(0.755, 0.05, 0.855, 0.06)`](https://cubic-bezier.com/#.755,.05,.855,.06)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeInQuint)` or
`var(--ease-in-quint)` | `@easeInQuint` or
`@ease-in-quint` | `$easeInQuint` or
`$ease-in-quint` | `easeInQuint` |
### easeOutQuint
[`cubic-bezier(0.23, 1, 0.32, 1)`](https://cubic-bezier.com/#.23,1,.32,1)
| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| `var(--easeOutQuint)` or
`var(--ease-out-quint)` | `@easeOutQuint` or
`@ease-out-quint` | `$easeOutQuint` or
`$ease-out-quint` | `easeOutQuint` |
### easeInOutQuint
[`cubic-bezier(0.86, 0, 0.07, 1)`](https://cubic-bezier.com/#.86,0,.07,1)
| CSS | LESS | SASS | JS |
| ---------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------- | ---------------- |
| `var(--easeInOutQuint)` or
`var(--ease-in-out-quint)` | `@easeInOutQuint` or
`@ease-in-out-quint` | `$easeInOutQuint` or
`$ease-in-out-quint` | `easeInOutQuint` |
### easeInExpo
[`cubic-bezier(0.95, 0.05, 0.795, 0.035)`](https://cubic-bezier.com/#.95,.05,.795,.035)
| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| `var(--easeInExpo)` or
`var(--ease-in-expo)` | `@easeInExpo` or
`@ease-in-expo` | `$easeInExpo` or
`$ease-in-expo` | `easeInExpo` |
### easeOutExpo
[`cubic-bezier(0.19, 1, 0.22, 1)`](https://cubic-bezier.com/#.19,1,.22,1)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeOutExpo)` or
`var(--ease-out-expo)` | `@easeOutExpo` or
`@ease-out-expo` | `$easeOutExpo` or
`$ease-out-expo` | `easeOutExpo` |
### easeInOutExpo
[`cubic-bezier(1, 0, 0, 1)`](https://cubic-bezier.com/#1,0,0,1)
| CSS | LESS | SASS | JS |
| -------------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | --------------- |
| `var(--easeInOutExpo)` or
`var(--ease-in-out-expo)` | `@easeInOutExpo` or
`@ease-in-out-expo` | `$easeInOutExpo` or
`$ease-in-out-expo` | `easeInOutExpo` |
### easeInCirc
[`cubic-bezier(0.6, 0.04, 0.98, 0.335)`](https://cubic-bezier.com/#.6,.04,.98,.335)
| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| `var(--easeInCirc)` or
`var(--ease-in-circ)` | `@easeInCirc` or
`@ease-in-circ` | `$easeInCirc` or
`$ease-in-circ` | `easeInCirc` |
### easeOutCirc
[`cubic-bezier(0.075, 0.82, 0.165, 1)`](https://cubic-bezier.com/#.075,.82,.165,1)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeOutCirc)` or
`var(--ease-out-circ)` | `@easeOutCirc` or
`@ease-out-circ` | `$easeOutCirc` or
`$ease-out-circ` | `easeOutCirc` |
### easeInOutCirc
[`cubic-bezier(0.785, 0.135, 0.15, 0.86)`](https://cubic-bezier.com/#.785,.135,.15,.86)
| CSS | LESS | SASS | JS |
| -------------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | --------------- |
| `var(--easeInOutCirc)` or
`var(--ease-in-out-circ)` | `@easeInOutCirc` or
`@ease-in-out-circ` | `$easeInOutCirc` or
`$ease-in-out-circ` | `easeInOutCirc` |
### easeInBack
[`cubic-bezier(0.6, -0.28, 0.735, 0.045)`](https://cubic-bezier.com/#.6,-.28,.735,.045)
| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| `var(--easeInBack)` or
`var(--ease-in-back)` | `@easeInBack` or
`@ease-in-back` | `$easeInBack` or
`$ease-in-back` | `easeInBack` |
### easeOutBack
[`cubic-bezier(0.175, 0.885, 0.32, 1.275)`](https://cubic-bezier.com/#.175,.885,.32,1.275)
| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| `var(--easeOutBack)` or
`var(--ease-out-back)` | `@easeOutBack` or
`@ease-out-back` | `$easeOutBack` or
`$ease-out-back` | `easeOutBack` |
### easeInOutBack
[`cubic-bezier(0.68, -0.55, 0.265, 1.55)`](https://cubic-bezier.com/#.68,-.55,.265,1.55)
| CSS | LESS | SASS | JS |
| -------------------------------------------------------- | -------------------------------------------- | -------------------------------------------- | --------------- |
| `var(--easeInOutBack)` or
`var(--ease-in-out-back)` | `@easeInOutBack` or
`@ease-in-out-back` | `$easeInOutBack` or
`$ease-in-out-back` | `easeInOutBack` |
---
_Source: https://npm.io/package/easings-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._