Package Exports

easings-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (easings-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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';

⚠️ 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`