easings

CSS easings as CSS vars

Usage no npm install needed!

<script type="module">
  import easings from 'https://cdn.skypack.dev/easings';
</script>

README

Easings

NPM version Build status Test coverage Dependency Status License Downloads Gittip

rework-ease, except without the rework dependency and it is intended to be used as CSS variables. For more information on easings, go to http://easings.net.

API

var easings = require('easings')

css = easings(css)

Replace all the var(<ease>) variable references with the actual easing function. Note that this is a really simple regexp-replace.

easings('transition: var(ease-in-back);')
// => 'transition: cubic-bezier(0.600, -0.280, 0.735, 0.045);'

easings.css

Since this library uses the CSS Variables specifications, easings.css is simply the :root object you would use to define all these easings. Thus, you'll eventually be able to do just append easings.css to your build and do var(ease-in-cubic). This is also available as /index.css.

@import 'https://nlz.io/github/reworkcss/easings/1/index.css';

body {
  transition: all var(ease-in-back);
}

easings.map

Map of <name>: <value> for all the easings.