CSS transition (animation) example of width and background-color:
div { width:100px; height:100px; background-color:yellow; transition:width 2s ease, background-color 2s linear; -webkit-transition:width 2s ease, background-color 2s linear; /* chrome and safari */ -moz-transition:width 2s ease, background-color 2s linear; /* firefox */ -o-transition:width 2s ease, background-color 2s linear; /* opera */ } div:hover { width:300px; background-color:green; }
|
Dynamic Pseudo Class |
Elements Affected |
Description |
|
:link |
Links only |
Unvisited links |
|
:visited |
Links only |
Visited links |
|
:hover |
All elements |
Mouse cursor over element |
|
:active |
All elements |
Mouse clicks element |
|
:focus |
All elements that can be selected |
Element is selected |
|
None |
All elements |
Default state of all elements |
What Can Be Transitioned?
|
CSS Property |
What Changes |
|
all |
All styles |
|
box-shadow |
Shadow of box |
|
background-color |
Color |
|
background-image |
Only gradients |
|
background-position |
Percentage, length |
|
border-bottom-color |
Color |
|
border-bottom-width |
Length |
|
border-color |
Color |
|
border-left-color |
Color |
|
border-left-width |
Length |
|
border-right-color |
Color |
|
border-right-width |
Length |
|
border-spacing |
Length |
|
border-top-color |
Color |
|
border-top-width |
Length |
|
border-width |
Length |
|
bottom |
Length, percentage |
|
color |
Color |
|
crop |
Rectangle |
|
font-size |
Length, percentage |
|
font-weight |
Number |
|
grid-* |
Various |
|
height |
Length, percentage |
|
left |
Length, percentage |
|
letter-spacing |
Length |
|
line-height |
Number, length, percentage |
|
margin-bottom |
Length |
|
margin-left |
Length |
|
margin-right |
Length |
|
margin-top |
Length |
|
max-height |
Length, percentage |
|
max-width |
Length, percentage |
|
min-height |
Length, percentage |
|
min-width |
Length, percentage |
|
opacity |
Number |
|
outline-color |
Color |
|
outline-offset |
Integer |
|
outline-width |
Length |
|
padding-bottom |
Length |
|
padding-left |
Length |
|
padding-right |
Length |
|
padding-top |
Length |
|
right |
Length, percentage |
|
text-indent |
Length, percentage |
|
text-shadow |
Shadow |
|
top |
Length, percentage |
|
vertical-align |
Keywords, length, percentage |
|
visibility |
Visibility |
|
width |
Length, percentage |
|
word-spacing |
Length, percentage |
|
z-index |
Integer |
|
zoom |
Number |
Transition Delay
|
Name |
How It Works |
|
cubic-bezier(x1, y1, x2, y2) |
X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function. |
|
linear |
Constant speed |
|
ease |
Gradual slowdown |
|
ease-in |
Speed up |
|
ease-out |
Slow down |
|
ease-in-out |
Speed up and then slow down |