$ cnpm install postcss-easings
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.47, 0, 0.745, 0.715);
}
.camel {
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
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;
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.
Copyright 2013 - present © cnpmjs.org