postcss-extract-animations

Extract inline @keyframes from your CSS rules so you can look at everything in one place.

Example

.a {
    animation: 1s @keyframes {
        to {
            opacity: 1;
        }
    }
}

becomes

@keyframes anim-c4fe818f {
    to {
        opacity: 1
    }
}
.a {
    animation: 1s anim-c4fe818f
}

Reducing the risk of drift since everything is contained within a single selector!

Usage

postcss([ require('postcss-extract-animations') ])

See PostCSS docs for examples for your environment.