Animation Targets

Global utility classes used to control animation behavior across the interface, including motion, timing, looping, and visual transitions.
Switch to Preview mode, then hover over or click each element as applicable to see its interaction.

Move

Moves the target element in a specified direction, then returns it to its original position on hover out.
Right
animation-icon-move-right
Example
Hover Over
Left
animation-icon-move-left
Example
Hover Over
Down
animation-icon-move-down
Example
Hover Over
Up
animation-icon-move-up
Example
Hover Over

Underline

Animates an underline by collapsing or expanding it.
Collapse
animation-underline-collapse
Example
Hover Over
Expand
animation-underline-expand
Example
Hover Over

Rotate 45°

Rotates the target element by 45 degrees, allowing it to toggle between two directional states.
animation-icon-rotate-45-clockwise
animation-icon-rotate-45-counterclockwise
Example
Click

Rotate 180°

Rotates the target element by 180 degrees, allowing it to toggle between two directional states.
animation-icon-rotate-180-clockwise
animation-icon-rotate-180-counterclockwise
Example
Click

Scale

Scales the target element up or down, then returns it to its original size.
Up
animation-icon-scale-up
Example
Hover Over
Down
animation-icon-scale-down
Example
Hover Over

Content Slide

Slides the target content horizontally or vertically, then returns it to its original position.
Horizontal
animation-content-slide-horizontal
Example
Hover Over
Vertical
animation-content-slide-vertical
Example
Hover Over

Backdrop Slide

Animates a background layer horizontally or vertically by collapsing or expanding it, then reverses the effect.
Horizontal Collapse
animation-backdrop-collapse-horizontal
Example
Hover Over
Horizontal Expand
animation-backdrop-expand-horizontal
Example
Hover Over
Vertical Collapse
animation-backdrop-collapse-vertical
Example
Hover Over
Vertical Expand
animation-backdrop-expand-vertical
Example
Hover Over