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-position transition property


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

Values

This is the value you will use with background-position property

ValueDescription
bottomEquivalent to 100% for the vertical position.
centerEquivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.
leftEquivalent to 0% for the horizontal position.
rightEquivalent to 100% for the horizontal position.
topEquivalent to 0% for the vertical position.
x% y%A percent of the element size. For example, with a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the element's box.
xpos yposActual pixel lengths. For example, with a value pair of '10px 20px', the upper left corner of the image is placed 10px to the right and 20px below the upper left corner of the element's box.

Example


*:hover {
   
background-position
 
bottom | center | left | right | top | number
}

Multiple Values

*:hover {
   
background-position
 
bottom | center | left | right | top | number, ...n
}

References