How to use the @uifabric/merge-styles.keyframes function in @uifabric/merge-styles

function _createSlideInY(fromY: number): string {
  return keyframes({
    from: { transform: `translate3d(0,${fromY}px,0)` },
    to: { transform: `translate3d(0,0,0)` }
  });
}

function _createSlideOutY(toY: number): string {
  return keyframes({
    from: { transform: `translate3d(0,0,0)` },
    to: { transform: `translate3d(0,${toY}px,0)` }
  });
}

function _createSlideOutX(toX: number): string {
  return keyframes({
    from: { transform: `translate3d(0,0,0)` },
    to: { transform: `translate3d(${toX}px,0,0)` }
  });
}

function _createSlideOutY(toY: number): string {
  return keyframes({
    from: { transform: `translate3d(0,0,0)` },
    to: { transform: `translate3d(0,${toY}px,0)` }
  });
}

const scaleDownOutAnimationName: string = keyframes({
  from: { transform: 'scale3d(1, 1, 1)' },
  to: { transform: 'scale3d(0.9, 0.9, 1)' }
});

const slideLeftOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },
  to: { transform: 'translate3d(-48px, 0, 0)' }
});

const slideRightOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },
  to: { transform: 'translate3d(48px, 0, 0)' }
});

const slideLeftInAnimationName: string = keyframes({
  from: { transform: 'translate3d(48px, 0, 0)' },
  to: { transform: 'translate3d(0, 0, 0)' }
});

const slideRightInAnimationName: string = keyframes({
  from: { transform: 'translate3d(-48px, 0, 0)' },
  to: { transform: 'translate3d(0, 0, 0)' }
});

const slideUpOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },
  to: { transform: 'translate3d(0, -48px, 0)' }
});

const slideDownOutAnimationName: string = keyframes({
  from: { transform: 'translate3d(0, 0, 0)' },

const SCALE_DOWN100: string = keyframes({
  from: { transform: 'scale3d(1.03,1.03,1)' },
  to: { transform: 'scale3d(1,1,1)' }
});

const SCALE_UP103: string = keyframes({
  from: { transform: 'scale3d(1,1,1)' },
  to: { transform: 'scale3d(1.03,1.03,1)' }
});

const ROTATE90: string = keyframes({
  from: { transform: 'rotateZ(0deg)' },
  to: { transform: 'rotateZ(90deg)' }
});

const ROTATE_N90: string = keyframes({
  from: { transform: 'rotateZ(0deg)' },
  to: { transform: 'rotateZ(-90deg)' }
});

/**
 * Exporting raw duraction values and easing functions to be used in custom animations
 */
export const AnimationVariables: IAnimationVariables = {
  easeFunction1: EASING_FUNCTION_1,
  easeFunction2: EASING_FUNCTION_2,
  durationValue1: DURATION_1,
  durationValue2: DURATION_2,
  durationValue3: DURATION_3,
  durationValue4: DURATION_4
};

function _createSlideInX(fromX: number): string {
  return keyframes({
    from: { transform: `translate3d(${fromX}px,0,0)` },
    to: { transform: `translate3d(0,0,0)` }
  });
}

const SCALE_DOWN100: string = keyframes({
  from: { transform: "scale3d(1.03,1.03,1)" },
  to: { transform: "scale3d(1,1,1)" }
});

const SCALE_UP103: string = keyframes({
  from: { transform: "scale3d(1,1,1)" },
  to: { transform: "scale3d(1.03,1.03,1)" }
});

const ROTATE90: string = keyframes({
  from: { transform: "rotateZ(0deg)" },
  to: { transform: "rotateZ(90deg)" }
});

const ROTATE_N90: string = keyframes({
  from: { transform: "rotateZ(0deg)" },
  to: { transform: "rotateZ(-90deg)" }
});

/**
 * Exporting raw duraction values and easing functions to be used in custom animations
 */
export const AnimationVariables: IAnimationVariables = {
  easeFunction1: EASING_FUNCTION_1,
  easeFunction2: EASING_FUNCTION_2,
  durationValue1: DURATION_1,
  durationValue2: DURATION_2,
  durationValue3: DURATION_3,
  durationValue4: DURATION_4
};

} from "./OfficeProgressIndicator.types";
import {FontSizes, FontWeights, HighContrastSelector, noWrap} from "@s-bauer/uifabric-styling";
import {getGlobalClassNames} from "@s-bauer/uifabric-styling";
import {IRawStyle, keyframes} from "@uifabric/merge-styles";
import {getRTL} from "@uifabric/merge-styles/lib/transforms/rtlifyRules";

const GlobalClassNames = {
  root: "ms-ProgressIndicator",
  itemName: "ms-ProgressIndicator-itemName",
  itemDescription: "ms-ProgressIndicator-itemDescription",
  itemProgress: "ms-ProgressIndicator-itemProgress",
  progressTrack: "ms-ProgressIndicator-progressTrack",
  progressBar: "ms-ProgressIndicator-progressBar"
};

const IndeterminateProgress = keyframes({
  "0%": {
    left: "-30%"
  },
  "100%": {
    left: "100%"
  }
});
const IndeterminateProgressRTL = keyframes({
  "100%": {
    right: "-30%"
  },
  "0%": {
    right: "100%"
  }
});