The CSS transform property changes how an element looks without changing its place in normal document flow. Shrinking an element with height can pull content below it upward; shrinking it with transform leaves the allocated space in place. Transform functions can scale, move, rotate, or distort the visible element. section 3.4.1
Make a loader pulse
Give a rectangle three keyframes: transform: scaleY(1) at the start, scaleY(0.2) halfway through, and scaleY(1) at the end. The rectangle appears to shrink to 20% of its height and grow again without pulling nearby content into its space. Set transform-origin: center to make it shrink toward its middle; an SVG element’s initial origin is at its top-left corner. section 3.4.1 section 3.4.6
Use translateY() when content should move visually without making surrounding elements reposition. In an interactive card, transform: translateY(calc(350px - 8rem)) moves the inner content down; hover and focus-within states return it to translateY(0). Because moving content can leave it visible beyond the card, the hidden state also limits the container’s height, clips overflow, and fades nonheader content with opacity. section 5.5
A transform can change instantly or animate. Keyframes define stages for a repeating loader; a transition animates between states. For a share link, transition: transform ease-in-out 250ms animates a hover or focus change from the default scale(1) to scale(1.25) and back. The card’s animated treatment is restricted to hover-capable screens at least 700px wide when reduced motion is not requested. section 3.4.1 section 5.5 section 11.6.1
Listing 3.7 Completed keyframe
@keyframes doScale { #1
from { transform: scaleY(1) } #2
50% { transform: scaleY(0.2) } #3
to { transform: scaleY(1) } #4
} #5
rect { animation-name: doScale; } #6
The loader’s complete keyframe rule shows scaleY() changing the visible height at the start, midpoint, and end. section 3.4.1
