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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--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) orvar(--ease-in-out-back) | @easeInOutBack or@ease-in-out-back | $easeInOutBack or$ease-in-out-back | easeInOutBack |