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
You can say this to an AI Agent
Implement the loading spinner with keyframes only while loading. Stop immediately on success or failure and show the resulting state. Under prefers-reduced-motion, use static or weaker feedback, and leave no permanent decorative loop.
When to use it
- Loading indicatorLoading, please wait…
- Onboarding explanation0%50%100%Break the motion into keyframes and let the browser fill in between.
- Attention to a new but important event123
- A multi-stage visual sequenceHover color changetransitionLoading pulseanimationState transitions vs. autonomous playback: each has its own job.
When NOT to use it
- Loop decorative motion near reading content
- Delay a task until an animation finishesHover color change@keyframesSimple hover effects can use transition.
- Use movement that conflicts with the interface state↩Without fill-mode: forwards, it returns to the initial frame when finished.
- Ignore performance and reduced-motion preferencesReduce motionRespect the user’s reduced-motion preference.
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check