easings-css

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