Custom easing functions for PostCSS! 📈
npm install postcss-easings
Wherever you've configured PostCSS:
var easings = require('postcss-easings')
This:
.ease-in-sine {
transition: opacity 300ms easeInSine;
}
.ease-out-sine {
transition-timing-function: easeOutSine;
}
Compiles to:
.ease-in-sine {
transition: opacity 300ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
.ease-out-sine {
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
- easeInSine
- easeOutSine
- easeInOutSine
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInBack
- easeOutBack
- easeInOutBack
All of these functions are taken from http://easings.net/