Attention
Plays one pulse or one shake on load, to point at something that has just changed.
Example
View Code
<div class="alert attention" data-variant="success" role="status">
<div><strong>Saved.</strong> Your changes are live.</div>
</div>
When to use it
On something that has just changed and might otherwise be missed: the alert that appeared after a save, the total that moved when a quantity changed, the field the server rejected. It plays on load, so in practice it arrives with the element, whether that element came from a navigation or was written into the page.
Not as an ornament, and not on anything permanent. A pulse on a heading that has always been there is an instruction to look at something that has nothing to say.
<p class="badge attention" data-attention="shake" data-variant="alert" role="status">Card declined</p>
How it works
One run of one animation, over --yeti-attention-duration. pulse swells the element to --yeti-attention-scale at the halfway point and settles back; the peak is in the middle so the gesture is symmetrical, since something that grows and snaps back reads as a twitch. shake throws it --yeti-attention-distance to each side and back twice, because a single sideways move is a slide and it takes the return trip to read as a shake.
It runs once, and the iteration count is deliberately left at the initial 1 rather than reading --yeti-motion-iterations, which exists for the animations that never end. A gesture that keeps repeating stops being a moment that has passed and becomes a state the page is in, and the reader has no way to dismiss it.
No keyframe leaves the element anywhere but where it started, so no fill mode is needed and nothing here can strand an element off its mark.
Accessibility
Motion is not an announcement. A screen reader hears nothing at all here, so a change worth pointing at is a change worth saying: put the element in a live region, or give it role="status", and the gesture becomes the visual half of something that is already spoken.
Under reduced motion --yeti-attention-duration collapses and the element simply sits still, which is the whole of the accommodation — there is nothing left to see, and the live region is still heard.
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-attention |
enum | pulse, shake |
pulse |
Which gesture: a swell and settle, or a shake from side to side. |
Children
No structural requirements.
Tokens
| Token | Description |
|---|---|
--yeti-attention-duration |
How long the gesture takes; reduced motion collapses it. |
--yeti-attention-distance |
How far a shake throws the element to each side. |
--yeti-attention-scale |
How large a pulse swells the element at its peak. |
--yeti-ease |
The easing of the gesture. |
Accessibility
- Motion is not an announcement. A change worth pointing at is worth saying, so put the element in a live region, or give it role="status", and the gesture becomes the visual half of something a screen reader already hears. It plays once and never repeats, so nothing here keeps moving under a reader who cannot dismiss it, and under reduced motion the duration collapses and the element simply sits still.
Browser support
- Used without guards: individual transform properties
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.