Should flag
Bounce / elastic easing
CSS bounce animation
animation: bounce 1s infinite
Elastic cubic-bezier
cubic-bezier(0.68, -0.55, 0.265, 1.55)
Should pass
Good easing
Smooth fade in
animation: fadeIn with exponential ease-out
Ease-out quart
cubic-bezier(0.25, 1, 0.5, 1) — smooth deceleration
Ease-out expo
cubic-bezier(0.16, 1, 0.3, 1) — natural feel
Safe transitions (transform / opacity / color only)
transition: transform
Transform is GPU-accelerated and safe.
transition: opacity
Opacity is GPU-accelerated and safe.
transition: color, background-color
Color transitions are paint-only, no layout.
transition: box-shadow
Shadow transitions are paint-only.
transition: all
Too common to flag — usually paired with transform/opacity.
transition: transform, opacity, box-shadow
Multiple safe properties combined.
Layout property transitions (the retired layout-transition rule)
transition: width
A progress bar fills by its width.
transition: height
A header shrinks on scroll by its height.
transition: padding
A header tightens its padding on scroll.
transition: margin
A toast slides in by its margin.
transition: max-height
An accordion opens by its max-height.
transition: width, height
Multiple layout properties.
transition: width, opacity
Layout property mixed with OK property.
transition-property: width
Longhand form.
Hover zoom on card imagery
Parent hover scales the card image
A card-wide zoom is the click affordance, not decoration.
Image hover scales the image itself
Same convention, written on the image's own hover state.
Utility classes, restrained magnitude
A four to five percent lift reads as a pointer cue.