postcss-easings
PostCSS plugin to replace easing names to cubic-bezier()
Last updated 2 years ago by ai .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ 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

  • 2.0.0                                ...           latest (2 years ago)

6 Versions

  • 2.0.0                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago

Copyright 2014 - 2016 © taobao.org |