type
status
date
slug
summary
tags
category
icon
password
Transition Property
Class | Properties |
transition-none | transition-property: none;
|
transition-all | transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
transition-opacity | transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
transition-shadow | transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
transition-transform | transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
|
Transition Duration
Class | Properties |
duration-0 | transition-duration: 0s;
|
duration-75 | transition-duration: 75ms;
|
duration-100 | transition-duration: 100ms;
|
duration-150 | transition-duration: 150ms;
|
duration-200 | transition-duration: 200ms;
|
duration-300 | transition-duration: 300ms;
|
duration-500 | transition-duration: 500ms;
|
duration-700 | transition-duration: 700ms;
|
duration-1000 | transition-duration: 1000ms;
|
Transition Timing Function
Class | Properties |
ease-linear | transition-timing-function: linear;
|
ease-in | transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
ease-out | transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
ease-in-out | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
Transition Delay
Class | Properties |
delay-0 | transition-delay: 0s;
|
delay-75 | transition-delay: 75ms;
|
delay-100 | transition-delay: 100ms;
|
delay-150 | transition-delay: 150ms;
|
delay-200 | transition-delay: 200ms;
|
delay-300 | transition-delay: 300ms;
|
delay-500 | transition-delay: 500ms;
|
delay-700 | transition-delay: 700ms;
|
delay-1000 | transition-delay: 1000ms;
|
Animation
Class | Properties |
animate-none | animation: none; |
animate-spin | animation: spin 1s linear infinite;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} |
animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
} |
animate-pulse | animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
} |
animate-bounce | animation: bounce 1s infinite;
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
|
- Author:worst developer
- URL:https://blog.hiyb.top/article/14
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts