CODEWITHSUNDEEP
csssass
The Old County
The Old County

Reputation: 89

@keyframes merging different browser versions into one

Is it possible to reduce the code to generate a set of mixins that can handle the various browser prefixes?

Trying to reduce the code length to use more mixins

So instead of 

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }
}


@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }
}

we have something more like this?

@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;

        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;

        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;

        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;

        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }
}

Upvotes: 2

Views: 161

Answers (1)

Luca
Luca

Reputation: 9715

in SASS you could use this template:

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}

it should get you started!

Upvotes: 4

Related Questions