easings-css

Easing functions for CSS, provided as CSS Custom Properties, JavaScript modules, JSON object and Less and Sass variables.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
easings-css
402.1.1a year ago6 years agoMinified + gzip package size for easings-css in KB

Readme

easings-css
Provides easing functions for CSS.
Available as CSS Custom Properties, JavaScript modules, JSON object and Less and Sass variables.

Usage

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.

.example {
  transition-timing-function: var(--ease-out-quad);
}

LESS

@import 'easings-css';

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

SASS

For Sass v3.6.0 and newer:
@import 'node_modules/easings-css';

For all other versions:
@import 'node_modules/easings-css/easings';

.example {
  transition-timing-function: $ease-out-quad;
}

JavaScript

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

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

JavaScript Module

import * as easings from 'easings-css';

You can also import individual easings for better tree-shaking:
import { easeOutQuad } from 'easings-css';

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

Easings

easeInSine

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 |

easeOutSine

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 |

easeInOutSine

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 |

easeInQuad

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 |

easeOutQuad

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 |

easeInOutQuad

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 |

easeInCubic

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 |

easeOutCubic

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 |

easeInOutCubic

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 |

easeInQuart

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 |

easeOutQuart

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 |

easeInOutQuart

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 |

easeInQuint

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 |

easeOutQuint

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 |

easeInOutQuint

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 |

easeInExpo

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 |

easeOutExpo

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 |

easeInOutExpo

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 |

easeInCirc

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 |

easeOutCirc

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 |

easeInOutCirc

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 |

easeInBack

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 |

easeOutBack

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 |

easeInOutBack

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 |