CSS transitions

CSS transitions is part of the CSS3 set of specifications, provide a way to make smooth animation when changing CSS properties. For example, Changing the color of an element from one to another, Changing positions and On hover event change border-radius property etc.

div {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
Property Name Type
background-color color
background-position repeatable list of simple list of length, percentage, or calc
border-bottom-color color
border-bottom-width length
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing simple list of length
border-top-color color
border-top-width length
bottom length, percentage, or calc
clip rectangle
color color
font-size length
font-weight font weight
height length, percentage, or calc
left length, percentage, or calc
letter-spacing length
line-height either number or length
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage, or calc
max-width length, percentage, or calc
min-height length, percentage, or calc
min-width length, percentage, or calc
opacity number
outline-color color
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage, or calc
text-indent length, percentage, or calc
text-shadow shadow list
top length, percentage, or calc
vertical-align length
visibility visibility
width length, percentage, or calc
word-spacing length
z-index integer

Read W3C specification for more about CSS3 transitions.

CSS3 | Color Transition

CSS3 | Width Transition

CSS3 | Position Transition

shanidkv's picture