The transition-property property specifies which CSS properties should transition when their values change. Initial value is all..box {
transition-property: opacity;
}.box {
transition-property: opacity, transform, background-color;
}allThe default value. Transitions apply to all animatable properties.noneNo properties transition.opacityTransition on the element's opacity (0–1).transformTransition on transform functions (translate, rotate, scale, etc.).colorTransition on the text color.background-colorTransition on the background color.widthTransition on the element's width.heightTransition on the element's height.topTransition on the top offset (mainly with position: absolute/relative).leftTransition on the left offset.marginTransition on margin values.paddingTransition on padding values.border-colorTransition on the border color.border-widthTransition on the border width.border-radiusTransition on border-radius (corner rounding).box-shadowTransition on the box shadow.font-sizeTransition on the font size.letter-spacingTransition on letter spacing.line-heightTransition on line height.max-widthTransition on max-width.max-heightTransition on max-height.gapTransition on gap between flex or grid items.flex-growTransition on the flex grow factor.filterTransition on filter functions (blur, brightness, etc.).clip-pathTransition on clip-path (when shapes are compatible).background-positionTransition on background position.background-sizeTransition on background size.visibilityTransition on visibility (discrete — useful combined with opacity).CSS Transitions Module Level 1Working DraftW3CMDNHover over meShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
