145 lines
2.4 KiB
CSS
145 lines
2.4 KiB
CSS
.page-transition-enter-active,
|
|
.page-transition-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.page-transition-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
|
|
.page-transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(1.05);
|
|
}
|
|
|
|
.page-transition-enter-to,
|
|
.page-transition-leave-from {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.fade-transition-enter-active,
|
|
.fade-transition-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.fade-transition-enter-from,
|
|
.fade-transition-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.slide-transition-enter-active,
|
|
.slide-transition-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.slide-transition-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
.slide-transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
.scale-transition-enter-active,
|
|
.scale-transition-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.scale-transition-enter-from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.scale-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.rotate-transition-enter-active,
|
|
.rotate-transition-leave-active {
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.rotate-transition-enter-from {
|
|
opacity: 0;
|
|
transform: rotate(-10deg) scale(0.9);
|
|
}
|
|
|
|
.rotate-transition-leave-to {
|
|
opacity: 0;
|
|
transform: rotate(10deg) scale(1.1);
|
|
}
|
|
|
|
.bounce-transition-enter-active {
|
|
animation: bounce-in 0.6s ease;
|
|
}
|
|
|
|
.bounce-transition-leave-active {
|
|
animation: bounce-out 0.4s ease;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-out {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
.zoom-transition-enter-active,
|
|
.zoom-transition-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.zoom-transition-enter-from {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
.zoom-transition-leave-to {
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.flip-transition-enter-active,
|
|
.flip-transition-leave-active {
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.flip-transition-enter-from {
|
|
opacity: 0;
|
|
transform: rotateY(90deg);
|
|
}
|
|
|
|
.flip-transition-leave-to {
|
|
opacity: 0;
|
|
transform: rotateY(-90deg);
|
|
}
|