Web animation changes interface properties over time to communicate movement, feedback, progress, or celebration. Its behavior comes from calculations: timing functions and easing shape the rate of change, while position, velocity, scroll position, and random values can drive the visual result. section 1.2.2 section 1.1
A dialog moving at constant speed can feel abrupt. Normalize elapsed time as progress, then use that progress to interpolate from a start position to an end position. Replacing linear progress with a cubic ease-out curve accelerates the dialog early and slows it as it arrives, creating a sense of dissipating momentum. section 12.1.1
Common ways to drive an animation include:
- Advance an angle each frame; use cosine for x and sine for y; then translate the element to create a circular path. Smaller angle increments slow motion, and negative increments reverse it. section 9.2.2
- Normalize scroll position from 0 to 1, then map it to width, percentage text, and color for a reading-progress indicator. section 13.3.1
- Update velocity with gravity, update position with velocity, and reverse vertical velocity with a bounce factor when an object reaches the floor. section 12.3.1
- Give canvas confetti randomized initial velocities, then apply gravity, drag, position updates, and rotation to make a brief completion effect. section 14.2.3
Responsive tooltip feedback
A hover or focus tooltip combines opacity and transform changes with a short cubic-bezier transition. Fast response and completion help the feedback feel immediate; a reversible curve suits an interaction that appears and disappears repeatedly. section 11.3.3
Listing 9.4 Circular path animation with CSS
@property --angle { #1
syntax: "<angle>"; #1
initial-value: 0deg; #1
inherits: true; #1
}
@keyframes orbit {
from { --angle: 0deg; } #2
to { --angle: 360deg; } #2
}
.orbiting {
--angle: 0deg;
--radius: 100px; #3
position: relative;
animation: orbit 5s linear infinite; #4
--snip--
}
.orbiting-element {
position: absolute;
left: calc(50% + var(--radius) *
cos(var(--angle)) - 10px); #5
top: calc(50% + var(--radius) *
sin(var(--angle)) - 10px); #6
--snip--
}
This CSS orbit animates a custom angle from 0deg to 360deg, then calculates left and top with cos() and sin(). section 9.2.2
