CSS transition (animation) example of width and background-color:
css:
div {
width: 100px;
height: 100px;
background-color: yellow;
transition: all 0.3s ease;
}
div:hover {
width: 300px;
background-color: cyan;
} |
div {
width: 100px;
height: 100px;
background-color: yellow;
transition: all 0.3s ease;
}
div:hover {
width: 300px;
background-color: cyan;
}
|
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
|