Question

I’ve started to find the duplication with certain css declarations a bit tedious.

For example, if I want to take advantage of the rotate transform and do something like back and forth rotation, across mozilla, chrome/safari and ie I have to do the following:

@-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}

@-moz-keyframes wiggle {
0% {-moz-transform:rotate(12deg);}
50% {-moz-transform:rotate(-6deg);}
100% {-moz-transform:rotate(12deg);}
}

@-ms-keyframes wiggle {
0% {-ms-transform:rotate(12deg);}
50% {-ms-transform:rotate(-6deg);}
100% {-ms-transform:rotate(12deg);}
}

And then of course I need to then apply each of these individually with:

.wiggle {
 -webkit-animation: wiggle 5s infinite;
 -moz-animation:    wiggle 5s infinite;
 -ms-animation:     wiggle 5s infinite;
}

In all of these, the only different is ms, moz, and webkit, which I find a bit stupid. Ideally the above 20 lines of code could be stripped down to 8. But each browser seems to be at war with each other and so css coders everywhere have to suffer.

Is this the way CSS and browser implementations plan to keep moving forward with these sorts of things? Is there a better shorter way? Doing this seems to be going against creating a more DRY coding experience.

Answer 1

If you want to take advantage of “cutting edge” css, then the answer will likely remain “yes” for a long time to come.