Animation
You might say
Make this icon loop through a subtle motion, like gently floating up and down.
Run a planned sequence of visual changesAnimation can repeat, play through keyframes, or express a larger state change that a simple transition cannot. Use it to explain progress or spatial relationships, not just to keep the screen moving. Provide a reduced-motion alternative when movement is substantial.
Know first
When to use it
- Loading indicatorLoading, please wait…
- Onboarding explanation
- Attention to a new but important event
- A multi-stage visual sequence
When NOT to use it
- Loop decorative motion near reading content
- Delay a task until an animation finishes
- Use movement that conflicts with the interface state
- Ignore performance and reduced-motion preferences
Anatomy
0%100%2sease-in-outinfinite ⟳
The node of the action, the intermediate frame is completed by the browser
How long does it take to play it all?
The speed between each frame, see easing
1 entry, infinite cycle
Variants
Once
Entry arrangement, stop at the last frame after playing
Infinite
⟳
Continuous states such as loading and breathing
Alternate
↔
Reciprocating motions such as swinging and flashing
Typical use cases
Loading
@keyframes breathing: transparency 0.4 ↔ 1 loop, telling the user "loading"
Success state
AI Assistant
Generating reply, will take about 5 seconds...
animation: rotate 0.8s infinite, until the data comes back
Feature tour
Visits
12,480
▲ 8.2%
New user
326
▲ 3.1%
Conversion rate
4.6%
▼ 0.4%
animation-delay: 0msanimation-delay: 100msanimation-delay: 200ms
animation-delay enters the scene one by one, and the page "lights up" rhythmically
Data update
New reply has been added to the list and the changes are marked with a short entry animation
New
Robot Assistant liked your article
1 hour ago
Background highlight flashes once
→
→
Stop at the last frame, no loop
Further reading