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.
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
|
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
|
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
|
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 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 are infinite animations that spin an element at various speeds. Consider using progress styles instead.
Class | Effect |
---|---|
sme-animation-spin-{{size}} |
|
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
|