Overview

SDS provides a set of global animation modifier classes that work across supported components:

• --blink fades the element out and back in.
• --glow adds a soft animated halo around the element.
• --pulse combines the glow and blink animations.
• --spin rotates an icon in-place.

The glow halo always uses the neutral default color, independent of the element’s own color.

Animations should only be used sparingly to indicate temporary states (such as uploading/downloading a file, sending/receiving data or waiting for a server side process to complete).

Icons

Standalone icons support all of the animation modifiers. --glow renders the halo as a soft shadow that follows the icon’s shape, and --pulse combines it with the blink animation.

The halo keeps its neutral color when a component color is applied to the icon:

Text

Plain text supports all of the animation modifiers. --glow and --pulse draw the halo directly around the text itself.

Tags

Also see tag animation for more examples.

Buttons

--spin animates the button icon in-place and requires an existing --icon-* class on the button. The other modifiers animate the entire button.

Icons placed inline within a button can be animated individually. See inline icon animation for further examples:

Notices