296 lines
5.2 KiB
CSS
296 lines
5.2 KiB
CSS
.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.fade-in { animation: fadeIn 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.fade-in-left { animation: fadeInLeft 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.fade-in-right { animation: fadeInRight 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeInTop {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.fade-in-top { animation: fadeInTop 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeInBottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.fade-in-bottom { animation: fadeInBottom 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
.fade-out { animation: fadeOut 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeOutLeft {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
.fade-out-left { animation: fadeOutLeft 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeOutRight {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
.fade-out-right { animation: fadeOutRight 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeOutTop {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
.fade-out-top { animation: fadeOutTop 2s ease-in-out forwards; }
|
|
|
|
@keyframes fadeOutBottom {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
.fade-out-bottom { animation: fadeOutBottom 2s ease-in-out forwards; }
|
|
|
|
@keyframes zoomIn {
|
|
from {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.zoom-in { animation: zoomIn 1.5s ease-in-out forwards; }
|
|
|
|
@keyframes zoomOut {
|
|
from {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.zoom-out { animation: zoomOut 1.5s ease-in-out forwards; }
|
|
|
|
@keyframes flyInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fly-in-left { animation: flyInLeft 2s ease-out; }
|
|
|
|
@keyframes flyInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fly-in-right { animation: flyInRight 2s ease-out; }
|
|
|
|
@keyframes flyInTop {
|
|
from {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fly-in-top { animation: flyInTop 2s ease-out; }
|
|
|
|
@keyframes flyInBottom {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fly-in-bottom { animation: flyInBottom 2s ease-out; }
|
|
|
|
@keyframes flyOutLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fly-out-left { animation: flyOutLeft 2s ease-out forwards; }
|
|
|
|
@keyframes flyOutRight {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fly-out-right { animation: flyOutRight 2s ease-out forwards; }
|
|
|
|
@keyframes flyOutTop {
|
|
from {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fly-out-top { animation: flyOutTop 2s ease-out forwards; }
|
|
|
|
@keyframes flyOutBottom {
|
|
from {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fly-out-bottom { animation: flyOutBottom 2s ease-out forwards; }
|
|
|
|
@keyframes spinInClockwise {
|
|
from {
|
|
transform: rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.spin-in-clockwise { animation: spinInClockwise 2s ease-in-out; }
|
|
|
|
@keyframes spinInCounterclockwise {
|
|
from {
|
|
transform: rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: rotate(-360deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.spin-in-counterclockwise { animation: spinInCounterclockwise 2s ease-in-out; }
|
|
|
|
@keyframes spinOutClockwise {
|
|
from {
|
|
transform: rotate(360deg);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.spin-out-clockwise { animation: spinOutClockwise 2s ease-in-out forwards; }
|
|
|
|
@keyframes spinOutCounterclockwise {
|
|
from {
|
|
transform: rotate(-360deg);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.spin-out-counterclockwise { animation: spinOutCounterclockwise 2s ease-in-out forwards; }
|
|
|
|
@keyframes typing {
|
|
from { width: 0; }
|
|
to { width: 100%; }
|
|
}
|
|
@keyframes blinkCursor {
|
|
from { border-right-color: rgba(0, 0, 0, 0.75); }
|
|
to { border-right-color: transparent; }
|
|
}
|
|
.typing {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
border-right: 2px solid rgba(0, 0, 0, 0.75);
|
|
width: 0;
|
|
animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite forwards;
|
|
}
|