Animation

You can use the animation CSS classes for navigation, panels, dialogs, and more. Animations include directionality (up, down, left, right relating to origin and completion of tasks), enter/exit (fade in, fade out, zoom in, zoom out), and duration (speed of enter/exit relating to urgency or content type).

In General, animations should be used in common controls and components. Use animations in custom scenarios only after careful consideration.

Slide

Slides fade in or out and come from left, right, up, or down. The tshirt sizes represent the length of the animation.

Class Effect
sme-animation-slide-in-{{direction[0]}}-{{size}}
sme-animation-slide-out-{{direction[1]}}-{{size}}
Click Me

Scale

Scales fade in or out and and increase or decrease the area of the effected element. sm is 98%, nuetral is 100%, and lg is 103%

Class Effect
sme-animation-scale-in-up-neutral
sme-animation-scale-in-up-lg
sme-animation-scale-in-down-neutral
sme-animation-scale-in-down-sm
sme-animation-scale-out-up-neutral
Click Me

Fade

Fades are simple fade in/out animations. The tshirt sizes represent the length of the animation.

Class Effect
sme-animation-fade-in-{{size}}
sme-animation-fade-out-{{size}}
Click Me

Rotate

Rotations are left or right and currently only exist in 1 size (md) which can be used for elements such as expanders that rotate coditionally.

Class Effect
sme-animation-rotate-right-md
sme-animation-rotate-left-md
Click Me

Transitions

Transitions are special animations that take effect on one or more css properties are changed.

Class Effect
sme-animation-transition-height-{{size}}
Click Me
sme-animation-transition-width-{{size}}
Click Me

Spins

Spins are infinite animations that spin an element at various speeds. Consider using progress styles instead.

Class Effect
sme-animation-spin-{{size}}

Delay

Delays cna delay the start of a animation squence. Tshirt sizes indicate the length of the delay.

Class Effect
sme-animation-delay-{{size}}
Click Me