93 lines
2.0 KiB
CSS
93 lines
2.0 KiB
CSS
/* Определение анимации */
|
||
@keyframes slide-left {
|
||
from {
|
||
transform: translateX(-100vw); /* Старт с -100% по оси X, чтобы меню было скрыто */
|
||
opacity: 0; /* Начальная прозрачность для плавного появления */
|
||
}
|
||
to {
|
||
transform: translateX(0vw); /* Конечное положение: на месте */
|
||
opacity: 1; /* Полная видимость */
|
||
}
|
||
}
|
||
|
||
@keyframes appear-opacity {
|
||
from {
|
||
opacity: 0; /* Начальная прозрачность для плавного появления */
|
||
}
|
||
to {
|
||
opacity: 1; /* Полная видимость */
|
||
}
|
||
}
|
||
|
||
.appear-opacity-100 {
|
||
animation: appear-opacity 0.1s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-200 {
|
||
animation: appear-opacity 0.2s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-300 {
|
||
animation: appear-opacity 0.3s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-400 {
|
||
animation: appear-opacity 0.4s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-500 {
|
||
animation: appear-opacity 0.5s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-600 {
|
||
animation: appear-opacity 0.6s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-700 {
|
||
animation: appear-opacity 0.7s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-800 {
|
||
animation: appear-opacity 0.8s ease-out forwards;
|
||
}
|
||
|
||
.appear-opacity-900 {
|
||
animation: appear-opacity 0.9s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-100 {
|
||
animation: slide-left 0.1s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-200 {
|
||
animation: slide-left 0.2s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-300 {
|
||
animation: slide-left 0.3s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-400 {
|
||
animation: slide-left 0.4s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-500 {
|
||
animation: slide-left 0.5s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-600 {
|
||
animation: slide-left 0.6s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-700 {
|
||
animation: slide-left 0.7s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-800 {
|
||
animation: slide-left 0.8s ease-out forwards;
|
||
}
|
||
|
||
.slide-left-900 {
|
||
animation: slide-left 0.9s ease-out forwards;
|
||
}
|