PostCSS Transition Shortcut

PostCSS Transform Shortcut is a PostCSS plugin that allows you to use shorthand transition properties in CSS, following the CSS Transform Module Level 2 Specification.

/* before */
.div {
property: all;
duration: 1s;
timing: ease-in-out;
delay: 1s;
}
/* after */
.div {
transition: all 1s ease-in-out 1s;
}

The property, duration, timing, and delay properties allow authors to specify simple transitions independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of transition-property, transition-duration, transition-timming and transition-delay.

The property attribute maps to the CSS3 transition-property, and specifies the name of an element to which the transition effect should be applied.

The duration attribute maps to the CSS3 transition-duration, and specifies how many seconds (s) or milliseconds (ms) a transition should take to complete.

The timing attribute maps to the CSS3 transition-timing-function, and specifies the speed curve of the transition effect.

The delay attribute maps to the CSS3 transition-delay, and specifies the delay that should elapse before the animation starts.

Usage

You just need to follow these two steps to use PostCSS Transition Shortcut:

1. Add PostCSS to your build tool.
2. Add PostCSS Transition Shortcut as a PostCSS process.

npm install postcss-transform-shortcut --save-dev

Node

require('postcss-transform-shortcut');

Gulp

Add Gulp PostCSS to your build tool:

npm install postcss-transform-shortcut --save-dev

Enable PostCSS Transition Shortcut within your Gulpfile:

'Gulp-postcss');
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var transition = require('postcss-transition-shortcut');
var processors = [ transition() ];
gulp.task('default', function () {
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});