TypeScript office-ui-fabric-react/lib/Styling keyframes Examples

Example #1

File: DonutChart.style.ts Project: aditima/office-ui-fabric-react

import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';

const donutChartLoadingSegmentAnimationSegment1Keyframes = keyframes({
  '90%': {
    strokeDashoffset: '-100'
  },
  '100%': {
    strokeDashoffset: '-100'
  }
});

const donutChartLoadingSegmentAnimationSegment2Keyframes = keyframes({
  '9%': {
    strokeDashoffset: '23'
  },
  '93%': {
    strokeDashoffset: '-100'
  },
  '100%': {
    strokeDashoffset: '-100'
  }
});

export interface IDonutChartStyles {
  donutChartLoading: IStyle;
  donutChartLoadingSegment: IStyle;
  donutChartLoadingBase: IStyle;
  // tslint:disable-next-line:no-any
  donutChartCircleFirst?: any;
  // tslint:disable-next-line:no-any

Example #2

File: Shimmer.style.ts Project: aditima/office-ui-fabric-react

import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';

const shimmerLoadingAnimationKeyframes = keyframes({
  '92.8%': {
    transform: 'translateX(100%)'
  },
  '100%': {
    transform: 'translateX(100%)'
  }
});

export interface IShimmerStyles {
  shimmerLoading: IStyle;
  shimmerLoadingBar: IStyle;
}

export const getStyles = (): IShimmerStyles => {
  return {
    shimmerLoading: {
      height: '300px',
      width: '240px',
      position: 'relative',
      bottom: '20%',
      /* scaling the y axis so we have nice round numbers to work with and get the size we want */
      transform: 'scaleY(0.2)',
      opacity: '0.6',
      overflow: 'hidden'
    },
    shimmerLoadingBar: {
      transform: 'translateX(-100%)',

Example #3

File: HorizontalBarGraph.style.ts Project: aditima/office-ui-fabric-react

import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';

const horizontalBarGraphLoadingAnimationBar1Keyframes = keyframes({
  ' 0%': {
    animationTimingFunction: 'cubic-bezier(0.67, 0, 0.46, 1)',
    transform: 'translateX(-100%)'
  },
  '92.8%': {
    transform: 'translateX(157%)'
  },
  '100%': {
    transform: 'translateX(157%)'
  }
});

const horizontalBarGraphLoadingAnimationBar2Keyframes = keyframes({
  '0%': {
    transform: 'translateX(-100%)'
  },
  '25%': {
    animationTimingFunction: 'cubic-bezier(0.67, 0, 0.43, 1)',
    transform: 'translateX(-100%)'
  },
  '90.6%': {
    transform: 'translateX(125%)'
  },
  '100%': {
    transform: 'translateX(125%)'
  }
});

Example #4

File: SetupCard.styles.ts Project: aditima/office-ui-fabric-react

import { DefaultFontStyles, FontWeights, DefaultPalette, keyframes } from 'office-ui-fabric-react/lib/Styling';

import { ISetupCardStyles, ISetupCardStylesProps } from './SetupCard.types';

const freTransformIntro = keyframes({
  from: {
    animationTimingFunction: 'cubic-bezier(.29,1.35,.71,1.01)',
    transform: 'translateY(496px)'
  }
});

const freOpacityIntro = keyframes({
  from: {
    animationTimingFunction: 'cubic-bezier(0.28, 0, 0, 1)'
  },
  to: {
    opacity: '1'
  }
});

export const getStyles = (props: ISetupCardStylesProps): ISetupCardStyles => {
  return {
    root: {
      fill: 'none',
      opacity: '0',
      animation: `${freTransformIntro} .583s 1, ${freOpacityIntro} .583s 1`,
      animationFillMode: 'forwards',
      position: 'absolute'
    },
    title: {
      fill: DefaultPalette.black,

Example #5

File: DashboardGridLayoutWithAddCardPanel.styles.ts Project: aditima/office-ui-fabric-react

import { IStyle, keyframes } from 'office-ui-fabric-react/lib/Styling';

export interface ICardStyles {
  root: IStyle;
  fadeIn: IStyle;
}

const fadeIn: string = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 }
});

// time for which the card fade in animation is shown, after adding a card to layout from add card panel
const fadeInAnimation = {
  animationName: fadeIn,
  animationDuration: '1.35s'
};

export const getCardStyles = (): ICardStyles => {
  return {
    root: {
      height: 'calc(100vh - 100px)'
    },
    fadeIn: [fadeInAnimation]
  };
};

Example #6

File: LineChart.style.ts Project: aditima/office-ui-fabric-react

import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';

const lineChartLoadingSegmentAnimationSegment1Keyframes = keyframes({
  '90%': {
    strokeDashoffset: '-105%'
  },
  '100%': {
    strokeDashoffset: '-105%'
  }
});

const lineChartLoadingSegmentAnimationSegment2Keyframes = keyframes({
  '9%': {
    strokeDashoffset: '65%'
  },
  '97%': {
    strokeDashoffset: '-105%'
  },
  '100%': {
    strokeDashoffset: '-105%'
  }
});

export interface ILineChartStyles {
  lineChartLoading: IStyle;
  lineChartLoadingSegment: IStyle;
  // tslint:disable-next-line:no-any
  lineChartLoadingSegmentFirst: any;
  // tslint:disable-next-line:no-any
  lineChartLoadingSegmentSecond: any;

Example #7

File: BarGraph.style.ts Project: aditima/office-ui-fabric-react

import { keyframes } from 'office-ui-fabric-react/lib/Styling';
import { IStyle } from 'office-ui-fabric-react/lib/Styling';

const barGraphLoadingAnimationBar1Keyframes = keyframes({
  '65.7%': {
    transform: 'translateY(-100%)'
  },
  '100%': {
    transform: 'translateY(-100%)'
  }
});

const barGraphLoadingAnimationBar2Keyframes = keyframes({
  '10%': {
    transform: 'translateY(125%)'
  },
  '68.5%': {
    transform: 'translateY(-100%)'
  },
  '100%': {
    transform: 'translateY(-100%)'
  }
});

const barGraphLoadingAnimationBar3Keyframes = keyframes({
  '5.7%': {
    transform: 'translateY(125%)'
  },
  '69.9%': {
    transform: 'translateY(-100%)'
  },