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.
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