Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
108 lines
2.8 KiB
CSS
108 lines
2.8 KiB
CSS
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
/* Schnellere Fade-Animation */
|
|
@keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Ultra-schnelle Fade-Animation */
|
|
@keyframes fade-fast {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Crossfade für sofortigen Übergang */
|
|
@keyframes crossfade {
|
|
from { opacity: 0.5; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from { transform: translateY(-1rem); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { transform: translateY(1rem); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes blur-in {
|
|
from { filter: blur(5px); opacity: 0; }
|
|
to { filter: blur(0); opacity: 1; }
|
|
}
|
|
|
|
/* 🎯 Transitions für benannte Bereiche - BESCHLEUNIGT */
|
|
|
|
::view-transition-old(main-content),
|
|
::view-transition-new(main-content) {
|
|
animation: fade 0.15s ease-out; /* Von 0.4s auf 0.15s reduziert */
|
|
}
|
|
|
|
/* Alternative: Noch schnellere Transition */
|
|
.fast-transitions ::view-transition-old(main-content),
|
|
.fast-transitions ::view-transition-new(main-content) {
|
|
animation: fade-fast 0.1s ease-out;
|
|
}
|
|
|
|
/* Alternative: Instant mit minimalem Fade */
|
|
.instant-transitions ::view-transition-old(main-content),
|
|
.instant-transitions ::view-transition-new(main-content) {
|
|
animation: crossfade 0.05s linear;
|
|
}
|
|
|
|
::view-transition-old(site-header),
|
|
::view-transition-new(site-header) {
|
|
animation: slide-down 0.2s ease-out; /* Von 0.4s auf 0.2s reduziert */
|
|
}
|
|
|
|
::view-transition-old(site-footer),
|
|
::view-transition-new(site-footer) {
|
|
animation: slide-up 0.2s ease-out; /* Von 0.4s auf 0.2s reduziert */
|
|
}
|
|
|
|
|
|
/* Admin-specific View Transitions */
|
|
::view-transition-old(admin-sidebar),
|
|
::view-transition-new(admin-sidebar) {
|
|
animation: fade 0.15s ease-out;
|
|
}
|
|
|
|
::view-transition-old(admin-content),
|
|
::view-transition-new(admin-content) {
|
|
animation: fade 0.15s ease-out;
|
|
}
|
|
|
|
::view-transition-old(admin-header),
|
|
::view-transition-new(admin-header) {
|
|
animation: slide-down 0.2s ease-out;
|
|
}
|
|
|
|
::view-transition-old(admin-popover),
|
|
::view-transition-new(admin-popover) {
|
|
animation: fade 0.15s ease-out;
|
|
}
|
|
|
|
/* Respektiere User-Präferenzen für reduzierte Bewegung */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-old(main-content),
|
|
::view-transition-new(main-content),
|
|
::view-transition-old(site-header),
|
|
::view-transition-new(site-header),
|
|
::view-transition-old(site-footer),
|
|
::view-transition-new(site-footer),
|
|
::view-transition-old(admin-sidebar),
|
|
::view-transition-new(admin-sidebar),
|
|
::view-transition-old(admin-content),
|
|
::view-transition-new(admin-content),
|
|
::view-transition-old(admin-header),
|
|
::view-transition-new(admin-header),
|
|
::view-transition-old(admin-popover),
|
|
::view-transition-new(admin-popover) {
|
|
animation: none;
|
|
}
|
|
}
|