Skip to content

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

License

Notifications You must be signed in to change notification settings

arpadHegedus/postcss-timing-function

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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(.77, 0, .17, 1)
}

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published