Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

postcss-easings

2.0.0 • Public • Published

PostCSS Easings Build Status

PostCSS plugin to replace easing name from easings.net to cubic-bezier().

.snake {
    transition: all 600ms ease-in-sine;
}
.camel {
    transition: all 600ms easeInSine;
}
.snake {
    transition: all 600ms cubic-bezier(0.4700.7450.715);
}
.camel {
    transition: all 600ms cubic-bezier(0.4700.7450.715);
}

Usage

Without options:

postcss([ require('postcss-easings') ])

With options:

postcss([
    require('postcss-easings')({
        easings: { easeJump: 'cubic-bezier(.86,0,.69,1.57)' }
    })
])

See PostCSS docs for examples for your environment.

Also you can get all build-in easings:

require('postcss-easings').easings;

Options

easings

Allow to set custom easings:

require('postcss-easings')({
    easings: { easeJump: 'cubic-bezier(.86,0,.69,1.57)' }
})

Plugin will convert custom easing name between camelCase and snake-case. So example below adds easeJump and ease-jump easings.

Custom easing name must start from ease and contain only letters and -.

You can create custom easing on cubic-bezier.com.

install

npm i postcss-easings

Downloadsweekly downloads

11,864

version

2.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability