GrooCSS

Code CSS in Groovy

Keyframes and Transforms DSL

GrooCSS includes support for both Keyframes and transforms.

def css = GrooCSS.process(new Config(addWebkit: false, addMoz: false, addOpera: false)) {
    keyframes('bounce') {
        40 % {
            translateY(-30.px)
        }
        60 % {
            translateY(-15.px)
        }
        frame([0,20,50,80,100]) {
            translateY(0)
        }
    }
}

Produces:

@keyframes bounce {
    40%{transform: translateY(-30px);}
    60%{transform: translateY(-15px);}
    0%, 20%, 50%, 80%, 100%{transform: translateY(0);}
}

Index | Next

Last updated: 31 July 2019