Motion that explains, not decorates
Good animation tells people where something came from and where it went. Everything else is noise.
Animation as information
When a panel slides in from the right, it tells the viewer that it lives to the right and will leave in that direction. When a deleted item shrinks and the list closes the gap, it shows what was removed and where the remaining items went. These animations carry information that a static change would leave the viewer to reconstruct on their own.
That is the test for any motion in an interface: does it explain a change, or is it just there?
Principles worth following
Continuity
An element that moves from one place to another should appear to be the same object throughout. A thumbnail that expands into a full image preserves context; a thumbnail that disappears while a full image fades in somewhere else breaks it.
Origin
Things should come from where they were triggered. A menu opened from a button should grow from that button, not from the center of the screen. Setting transform-origin correctly is a small detail with a large effect on how natural the interaction feels.
Restraint
Most interface animations should last between 150 and 300 milliseconds. Shorter feels abrupt; longer feels sluggish, especially on actions people repeat dozens of times a day. Reserve longer, more expressive motion for rare moments such as a first launch or a completed purchase.
Easing matters
Linear motion looks mechanical. Real objects accelerate and decelerate. An ease-out curve, fast at the start and gentle at the end, suits elements entering the screen. An ease-in curve suits elements leaving. Springs feel more physical still, and they handle interruption gracefully when the user reverses an action halfway through.
Performance
Animate transform and opacity whenever possible. Both can be handled by the compositor without recalculating layout, so they stay smooth even when the main thread is busy. Animating width, height, or top forces layout on every frame and stutters on slower devices.
Respect reduced motion
Some people experience discomfort or nausea from large movements on screen. The prefers-reduced-motion media query lets you honor their setting. Reduced does not have to mean none: replace large slides and zooms with gentle fades so that changes are still communicated without sweeping movement.
Audit your motion
Record your interface at normal speed and watch it back slowly. For each animation, ask what it explains. If the answer is nothing, remove it or make it faster. The interface will feel calmer and more responsive, and the animations that remain will mean more.