46 lines
970 B
CSS
46 lines
970 B
CSS
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
@keyframes fade {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from { transform: translateY(-2rem); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slide-up {
|
|
from { transform: translateY(2rem); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes blur-in {
|
|
from { filter: blur(10px); opacity: 0; }
|
|
to { filter: blur(0); opacity: 1; }
|
|
}
|
|
|
|
/* 🎯 Transitions für benannte Bereiche */
|
|
|
|
::view-transition-old(main-content),
|
|
::view-transition-new(main-content) {
|
|
animation: fade 0.4s ease;
|
|
}
|
|
|
|
::view-transition-old(site-header),
|
|
::view-transition-new(site-header) {
|
|
animation: slide-down 0.4s ease;
|
|
}
|
|
|
|
::view-transition-old(site-footer),
|
|
::view-transition-new(site-footer) {
|
|
animation: slide-up 0.4s ease;
|
|
}
|
|
|
|
::view-transition-old(sidebar),
|
|
::view-transition-new(sidebar) {
|
|
animation: blur-in 0.3s ease;
|
|
}
|