postcss-easings
PostCSS plugin to replace easing names to cubic-bezier()
Last updated 8 years ago by ai .
MIT · Repository · Bugs · Original npm
$ cnpm install postcss-easings 
SYNC missed versions from official npm registry.

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.47, 0, 0.745, 0.715);
}
.camel {
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.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.

Current Tags

  • 1.0.1                                ...           latest (8 years ago)

2 Versions

  • 0.3.0                                ...           10 years ago
  • 1.0.1                                ...           8 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2013 - present © cnpmjs.org