postcss-prefixer-keyframes

PostCSS Prefixer Keyframes

PostCSS plugin to prefix keyframes.

/* Input example */
@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

div {
  width: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

a {
  color: green;
  position: relative;
  animation: externalanimation 5s infinite;
}

/* Output example */
@keyframes myWebsite-mymove {
    from {top: 0px;}
    to {top: 200px;}
}

div {
    width: 100px;
    background: red;
    position: relative;
    animation: myWebsite-mymove 5s infinite;
}

a {
    color: green;
    position: relative;
    animation: externalanimation 5s infinite;
}

Usage

var prefix = require('postcss-prefixer-keyframes');
postcss([ prefix({prefix: 'myWebsite-'}) ])

See PostCSS docs for examples for your environment.