0xzakk / postcss-easings

Custom easing functions for PostCSS! :chart_with_upwards_trend:

PostCSS Easings

Custom easing functions for PostCSS! 📈

Installation

npm install postcss-easings

Usage

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);
}

Available Functions:

• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack

Thanks

All of these functions are taken from http://easings.net/