transition
Interpolates between property values when they change. Most hover effects are simply transitions applied to a small set of properties.
4,812 effects in the catalog use this property.
Syntax
transition: <property> <duration> <timing-function> <delay>;Watch out
`transition: all` may include layout-triggering properties and cause jank. Prefer an explicit list, especially `transform` and `opacity`, which can often stay on the compositor.
Common values
all .2s ease- Transitions every changed property; convenient but potentially expensive
transform .3s cubic-bezier(.4,0,.2,1)- Transitions only transform with a custom easing curve
Effects using transition
These are working effects from the catalog. Open a tile to inspect the full source.