easings-css

Provides easing functions for CSS.

Available as CSS Custom Properties, JavaScript modules, JSON object and Less and Sass variables.

Usage

$3

``css
@import 'easings-css';
`

> :warning: If you're not using 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);
}
`

$3

`less
@import 'easings-css';
`

`less
.example {
transition-timing-function: @ease-out-quad;
}
`

$3

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;
}
`

$3

`js
const easings = require('easings-css');
`

`js
const Example = styled.div
transition-timing-function: ${easings.easeOutQuad};
;
`

$3

`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

$3

cubic-bezier(0.47, 0, 0.745, 0.715)

| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| var(--easeInSine) or
var(--ease-in-sine) | @easeInSine or
@ease-in-sine | $easeInSine or
$ease-in-sine | easeInSine |

$3

cubic-bezier(0.39, 0.575, 0.565, 1)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeOutSine) or
var(--ease-out-sine) | @easeOutSine or
@ease-out-sine | $easeOutSine or
$ease-out-sine | easeOutSine |

$3

cubic-bezier(0.445, 0.05, 0.55, 0.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 |

$3

cubic-bezier(0.55, 0.085, 0.68, 0.53)

| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| var(--easeInQuad) or
var(--ease-in-quad) | @easeInQuad or
@ease-in-quad | $easeInQuad or
$ease-in-quad | easeInQuad |

$3

cubic-bezier(0.25, 0.46, 0.45, 0.94)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeOutQuad) or
var(--ease-out-quad) | @easeOutQuad or
@ease-out-quad | $easeOutQuad or
$ease-out-quad | easeOutQuad |

$3

cubic-bezier(0.455, 0.03, 0.515, 0.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 |

$3

cubic-bezier(0.55, 0.055, 0.675, 0.19)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeInCubic) or
var(--ease-in-cubic) | @easeInCubic or
@ease-in-cubic | $easeInCubic or
$ease-in-cubic | easeInCubic |

$3

cubic-bezier(0.215, 0.61, 0.355, 1)

| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| var(--easeOutCubic) or
var(--ease-out-cubic) | @easeOutCubic or
@ease-out-cubic | $easeOutCubic or
$ease-out-cubic | easeOutCubic |

$3

cubic-bezier(0.645, 0.045, 0.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 |

$3

cubic-bezier(0.895, 0.03, 0.685, 0.22)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeInQuart) or
var(--ease-in-quart) | @easeInQuart or
@ease-in-quart | $easeInQuart or
$ease-in-quart | easeInQuart |

$3

cubic-bezier(0.165, 0.84, 0.44, 1)

| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| var(--easeOutQuart) or
var(--ease-out-quart) | @easeOutQuart or
@ease-out-quart | $easeOutQuart or
$ease-out-quart | easeOutQuart |

$3

cubic-bezier(0.77, 0, 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 |

$3

cubic-bezier(0.755, 0.05, 0.855, 0.06)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeInQuint) or
var(--ease-in-quint) | @easeInQuint or
@ease-in-quint | $easeInQuint or
$ease-in-quint | easeInQuint |

$3

cubic-bezier(0.23, 1, 0.32, 1)

| CSS | LESS | SASS | JS |
| ----------------------------------------------------- | ----------------------------------------- | ----------------------------------------- | -------------- |
| var(--easeOutQuint) or
var(--ease-out-quint) | @easeOutQuint or
@ease-out-quint | $easeOutQuint or
$ease-out-quint | easeOutQuint |

$3

cubic-bezier(0.86, 0, 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 |

$3

cubic-bezier(0.95, 0.05, 0.795, 0.035)

| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| var(--easeInExpo) or
var(--ease-in-expo) | @easeInExpo or
@ease-in-expo | $easeInExpo or
$ease-in-expo | easeInExpo |

$3

cubic-bezier(0.19, 1, 0.22, 1)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeOutExpo) or
var(--ease-out-expo) | @easeOutExpo or
@ease-out-expo | $easeOutExpo or
$ease-out-expo | easeOutExpo |

$3

cubic-bezier(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 |

$3

cubic-bezier(0.6, 0.04, 0.98, 0.335)

| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| var(--easeInCirc) or
var(--ease-in-circ) | @easeInCirc or
@ease-in-circ | $easeInCirc or
$ease-in-circ | easeInCirc |

$3

cubic-bezier(0.075, 0.82, 0.165, 1)

| CSS | LESS | SASS | JS |
| --------------------------------------------------- | --------------------------------------- | --------------------------------------- | ------------- |
| var(--easeOutCirc) or
var(--ease-out-circ) | @easeOutCirc or
@ease-out-circ | $easeOutCirc or
$ease-out-circ | easeOutCirc |

$3

cubic-bezier(0.785, 0.135, 0.15, 0.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 |

$3

cubic-bezier(0.6, -0.28, 0.735, 0.045)

| CSS | LESS | SASS | JS |
| ------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------ |
| var(--easeInBack) or
var(--ease-in-back) | @easeInBack or
@ease-in-back | $easeInBack or
$ease-in-back | easeInBack |

$3

cubic-bezier(0.175, 0.885, 0.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 |

$3

cubic-bezier(0.68, -0.55, 0.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` |