autoprefixer not prefixing @keyframes?

1.2k Views Asked by At

I just copied the sample at https://www.npmjs.com/package/gulp-autoprefixer after I installed gulp and gulp-autoprefixer:

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function () {
    return gulp.src('src/a.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dest'));
});

and I have following in my a.css:

@keyframes x {
    from { left: 0; }
    to { left: 100%; }
}

after I gulp, I get a.css in desc, but with the exact same code as the original. No -webkit- is added, but from http://caniuse.com/#search=keyframes it should be prefixed for Android Browser, which is my target device.

Am I missing something?

1

There are 1 best solutions below

4
Lowkase On BEST ANSWER

The caniuse site specifies that keyframes are supported back to 4.3 without the need to prefix.

In gulp you have specified that prefixing should occur for the last 2 versions of browsers. Meaning prefixing will be based on rules set out by browsers from two versions previous:

browsers: ['last 2 versions']

If you want to support Android from a much earlier version then play around with the browsers option in the autoprefixer module:

browsers: ['last 5 versions']