Mixin for translate3d support with translate fallback

translate3d-mixin.scss

// Translate3d uses GPU acceleration for increased performance with translate fallback

@mixin translate-x($value) {
    will-change: transform
    transform: translateX($value);
    @supports (transform: translate3d($value, 0, 0)) {
        transform: none;
        transform: translate3d($value, 0, 0);
    }
}

@mixin translate-y($value) {
    will-change: transform
    transform: translateY($value);
    @supports (transform: translate3d(0, $value, 0)) {
        transform: none;
        transform: translate(0, $value, 0);
    }
}