CSS Transition Properties

backgroundbackground-colorbackground-imagebackground-positionbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-colorborder-imageborder-image-outsetborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthborder-widthbottombox-shadowclipclip-pathcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnsfilterflexflex-basisflex-growflex-shrinkfontfont-sizegapgridgrid-auto-columnsgrid-column-gapgrid-gapgrid-row-gapgrid-templategrid-template-columnsgrid-template-rowsheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmask-imagemask-positionmask-sizemax-heightmax-widthmin-heightmin-widthobject-positionopacityoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originrightrow-gaptext-decorationtext-decoration-colortext-decoration-thicknesstext-indenttext-shadowtoptransformtransform-originvertical-alignwidthword-spacingz-index

CSS background transition property


with use of the background property you can create smooth transition between two different background property values.

Values

This is the value you will use with background property

ValueDescription
background-colorSets the background color of an element.
background-imageSets one or several background images for an element.
background-positionSets the initial position of the background image.
background-sizeSpecifies the size of the background images.
background-repeatSpecifies how background images are tiled after they have been sized and positioned.
background-originSpecifies the positioning area of the background images.
background-attachmentSpecifies whether the background scrolls with the document, or remains fixed to the viewing area.
initialSets this property to its default value.

Example


*:hover {
   
background
 
background-color background-image background-position / background-size background-repeat background-origin background-clip background-attachment
}

Multiple Values

*:hover {
   
background
 
background-color background-image background-position / background-size background-repeat background-origin background-clip background-attachment, ...n
}

References