Nullifying Precipitation Machine

    postcss-timing-function

    1.0.2 • Public • Published

    A PostCSS plugin to add other common named timing functions without having to remember bezier values.

    Installation

    npm install postcss-timing-function

    Example

    body {
        transition: all .3s ease-in-out-quart
    }

    will produce

    body {
        transition: all .3s cubic-bezier(.770.171)
    }

    Usage

    Using Gulp.

    var gulp            = require('gulp'),
        postcss         = require('gulp-postcss'),
        timingFunction  = require('postcss-timing-function');
     
    gulp.task('css', function() {
        gulp.src('path/to/dev/css').
            .pipe(postcss({
                timingFunction
            }))
            .pipe(gulp.dest('path/to/build/css'));
    });
     
    // rest of the gulp file

    Transitions

    The supported named transitions are:

    • ease-in-quad
    • ease-in-cubic
    • ease-in-quart
    • ease-in-quint
    • ease-in-sine
    • ease-in-expo
    • ease-in-circ
    • ease-out-quad
    • ease-out-cubic
    • ease-out-quart
    • ease-out-quint
    • ease-out-sine
    • ease-out-expo
    • ease-out-circ
    • ease-out-back
    • ease-in-out-quad
    • ease-in-out-cubic
    • ease-in-out-quart
    • ease-in-out-quint
    • ease-in-out-sine
    • ease-in-out-expo
    • ease-in-out-circ
    • ease-in-out-back
    • swift-out
    • bounce

    Keywords

    none

    Install

    npm i postcss-timing-function

    DownloadsWeekly Downloads

    10

    Version

    1.0.2

    License

    none

    Last publish

    Collaborators

    • arpadhegedus