office-ui-fabric-core/src/documentation/templates/models/AnimationModel.json

The front-end framework for building experiences for Office 365.

{
  "items": [
    {
      "class": "ms-slideRightIn10",
      "description": "Slide right 10px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideRightIn20",
      "description": "Slide right 20px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideRightIn40",
      "description": "Slide right 40px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideLeftIn10",
      "description": "Slide left 10px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideLeftIn20",
      "description": "Slide left 20px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideLeftIn40",
      "description": "Slide left 40px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideUpIn20",
      "description": "Slide up 20px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideUpIn10",
      "description": "Slide up 10px and fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideDownIn20",
      "description": "Slide down 20px and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-slideDownIn10",
      "description": "Slide down 10px and fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideRightOut40",
      "description": "Slide right 40px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideLeftOut40",
      "description": "Slide left 40px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideUpOut20",
      "description": "Slide up 20px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideUpOut10",
      "description": "Slide up 10px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideDownOut20",
      "description": "Slide down 20px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-slideDownOut10",
      "description": "Slide down 10px and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-scaleUpIn100",
      "description": "Scale up to 100% and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-scaleDownIn100",
      "description": "Scale down to 100% and fade in",
      "bezier": "cubic-bezier(0.1, 0.9, 0.2, 1)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-scaleUpOut103",
      "description": "Scale up to 103% and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-scaleDownOut98",
      "description": "Scale down to 98% and fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-fadeIn100",
      "description": "Fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-fadeIn200",
      "description": "Fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.267s" 
    },
    {
      "class": "ms-fadeIn400",
      "description": "Fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.367s" 
    },
    {
      "class": "ms-fadeIn500",
      "description": "Fade in",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.467s" 
    },
    {
      "class": "ms-fadeOut100",
      "description": "Fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.167s" 
    },
    {
      "class": "ms-fadeOut200",
      "description": "Fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.267s" 
    },
    {
      "class": "ms-fadeOut400",
      "description": "Fade out",
      "bezier": "cubic-bezier(0.1, 0.25, 0.75, 0.9)",
      "timing": "0.367s" 
    }
  ]
}