Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

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

20,037

Version

2.0.0

License

MIT

Unpacked Size

6.45 kB

Total Files

5

Last publish

Collaborators

  • avatar