Is there a CSS tool / language / syntax to simplify "-moz" "-webkit" "-ms" "-o" statements compatibility?

This is an example code with many compatibility versions:

.shake {
background-color: #2bd993;
color: #fff;
font-size: 24px;
margin: 30px 0 0;
padding: 20px;
text-transform: uppercase;
}
.shake:hover {
animation: shake 150ms 2 linear;
-moz-animation: shake 150ms 2 linear;
-webkit-animation: shake 150ms 2 linear;
-o-animation: shake 150ms 2 linear;
}
@keyframes shake {
0% {
transform: translate(3px, 0);
}
50% {
transform: translate(-3px, 0);
}
100% {
transform: translate(0, 0);
}
}
@-moz-keyframes shake {
0% {
-moz-transform: translate(3px, 0);
}
50% {
-moz-transform: translate(-3px, 0);
}
100% {
-moz-transform: translate(0, 0);
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform: translate(3px, 0);
}
50% {
-webkit-transform: translate(-3px, 0);
}
100% {
-webkit-transform: translate(0, 0);
}
}
@-ms-keyframes shake {
0% {
-ms-transform: translate(3px, 0);
}
50% {
-ms-transform: translate(-3px, 0);
}
100% {
-ms-transform: translate(0, 0);
}
}
@-o-keyframes shake {
0% {
-o-transform: translate(3px, 0);
}
50% {
-o-transform: translate(-3px, 0);
}
100% {
-o-transform: translate(0, 0);
}
}

Are there CSS languages / syntax / tips to write less code while maximizing retrocompatibility ?

The best I have achieved so far was with the use of CSS variables, but I wonder if we can simplify further.

If you would use SASS or the like you could add an Autoprefixer, you can also check https://caniuse.com/ and see if it is still necessary to add the prefixes