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;
}
Custom animations:
css:
.agent-1, .agent-2, .agent-3 {
background-color: lightblue;
}
.agent-2 {
background-color: yellow;
}
.agent-3 {
background-color: lightgreen;
}
.agent-1, .agent-3 {
opacity: 0;
animation: fade-in-right ease 0.4s forwards;
}
.agent-2 {
transform: scaleX(0);
transform-origin: left;
animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
animation-delay: 0.4s;
}
.agent-3 {
animation-delay: 0.8s;
}
@keyframes fade-in-right {
from {
opacity: 0;
transform: translateX(-15px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes grow-left {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
|
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 |
okkk