Skip to content

Samples by Class: Animation

The ms-motion-* and ms-* classes apply various transitions and timings to apply to elements as they appear/disappear.

Samples are grouped by classes used. Expand to see the related samples.

0 samples

ms-expandCollapse100

0 samples

ms-expandCollapse200

0 samples

ms-expandCollapse400

0 samples

ms-fadeIn100

0 samples

ms-fadeIn200

0 samples

ms-fadeIn400

0 samples

ms-fadeIn500

0 samples

ms-fadeOut100

0 samples

ms-fadeOut200

0 samples

ms-fadeOut400

0 samples

ms-fadeOut500

0 samples

ms-motion-fadeIn

0 samples

ms-motion-fadeOut

0 samples

ms-motion-scaleDownIn

0 samples

ms-motion-scaleDownOut

0 samples

ms-motion-slideDownIn

0 samples

ms-motion-slideDownOut

0 samples

ms-motion-slideLeftIn

0 samples

ms-motion-slideLeftOut

1 sample 

ms-motion-slideRightIn

0 samples

ms-motion-slideRightOut

0 samples

ms-motion-slideUpIn

0 samples

ms-motion-slideUpOut

0 samples

ms-rotate90deg

0 samples

ms-rotateN90deg

0 samples

ms-scaleDownIn100

0 samples

ms-scaleDownOut98

0 samples

ms-scaleUpIn100

0 samples

ms-scaleUpOut103

0 samples

ms-slideDownIn10

0 samples

ms-slideDownIn20

0 samples

ms-slideDownOut10

0 samples

ms-slideDownOut20

0 samples

ms-slideLeftIn10

0 samples

ms-slideLeftIn20

0 samples

ms-slideLeftIn40

0 samples

ms-slideLeftIn400

0 samples

ms-slideLeftOut40

0 samples

ms-slideLeftOut400

0 samples

ms-slideRightIn10

0 samples

ms-slideRightIn20

0 samples

ms-slideRightIn40

0 samples

ms-slideRightIn400

0 samples

ms-slideRightOut40

0 samples

ms-slideRightOut400

0 samples

ms-slideUpIn10

0 samples

ms-slideUpIn20

0 samples

ms-slideUpOut10

0 samples

ms-slideUpOut20