Easings-css NPM

easings-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`

animation animation-timing-function css easings less sass scss timing-function transition transition-timing-function

vue-treeselect-vinfast @1fer/vue-treeselect ftms-fe-common-components @everything-registry/sub-chunk-1545 @dnewkerk/vue-treeselect @denisemenov/vue-treeselect @ecdt_henrique_peixoto/vue-treeselect @emacle/vue-treeselect @energiency/vue-treeselect @ennnnny/vue-treeselect @gergokatyi/vue-treeselect @longwayya/vue-treeselect @mail2gowthamganesan/techno-vue-treeselect @bingosoftnn/vue-treeselect @manhjin/vue-treeselect foreo--vue-treeselect hesc-vue-treeselect hlc-select-tree @riophae/vue-treeselect @nationaljournal/vue-treeselect @forkfdawa/vue-treeselect @gaols/vue-treeselect @fattypanda/vue-treeselect @fatihbasar/vue-treeselect gz-vue-treeselect @myena/vue-treeselect @tomatobobot/vue-treeview @infineon/infineon-vue-datatable jmx-vue-treeselect @s3_dse/vue-treeselect @gzwzc/vue-treeselect @hobbytowo/vue-treeselect @fishtank/vue-treeselect @hanye9895/vue-treeselect @hbis/vue-treeselect @havunen/vue-treeselect @guanweibo/hydro-vue-treeselect lines-split @thinhhung/vue-treeselect @tkmam1x/vue-treeselect msm-pass-ui-cg-v1 @yeylcom/vue-treeselect @yoyohan1/vue-treeselect neap-ui neap-ui2 qiho-treeselect @wwv/vue-treeselect woqu-treeselect @ynyuc/vue-treeselect @zax4r0/vue-treeselect @zanmato/vue3-treeselect @zeedhi/zd-vue-treeselect @unifai/vue-treeselect ns-saas-ui ns-form-components newhope-ui2 a-vue-treeselect @zorange/vue2-treeselect pds-common-components pds-fe-components vue-treeselect-aops vue-treeselect-click vue-treeselect-cus vue-treeselect-fork vue-treeselect-mask vue-treeselect-mz vue-treeselect-next vue-treeselect-pl vue-treeselect-sh vue-treeselect-vf vue-treeselect-xhx cssesc-wbg y_treeselect ds-vuetreeselect zeedhi-vue-treeselect zjw-riophae elx-treeselect etah-select-tree southgisui-test @adolph_dudu/d-vuetreeselect singler-treeselect @aoyahk/vue-treeselect

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

7 years ago